An HTML, CSS, and JavaScript journal app.
wizzo1337 / code-journal Goto Github PK
View Code? Open in Web Editor NEWA dynamic HTML, CSS, and JavaScript journal application for coders who want to capture their notes.
A dynamic HTML, CSS, and JavaScript journal application for coders who want to capture their notes.
Coders will want to capture tidbits they pick up during their research.
Create a responsive form that allows users to store an image URL with some notes about a specific topic.
div[data-view="entries"]
to the HTML.'entries'
view.'entries'
view if they have a profile already.div[data-view="create-entry"]
to the HTML.div[data-view="create-entry"]
.required
.'entries'
view that navigates the user to the 'create-entry'
view.'input'
events on the photoUrl
input to update the photo preview when the input value changes.'submit'
events on the journal entry form and:
'entries'
view again.'entries'
view if they haven't created their profile.Users like to personalize things! ๐
Create a responsive form for users to enter their profile details into and save their data to local storage.
required
.name
attributes of the form input elements match the keys of the profile data model.'input'
events on the avatar url input.src
when the avatar url input changes.'submit'
events on the form.Users will want to check what information they have told us about themselves.
Create a separate view that dynamically renders the user's profile details.
div[data-view="edit-profile"]
view in the HTML.div[data-view="profile"]
to the HTML to display the user's profile information.data-view="profile"
with HTML and CSS.data-view
to show and hides all others.'edit-profile'
or 'profile'
as an argument.
div[data-view="profile"]
when showing the 'profile'
.div[data-view="profile"]
when showing the 'profile'
.'submit'
event listener on the form to show the 'profile'
view after profile data model has been updated.document
for 'DOMContentLoaded'
.
username
, show the profile form, otherwise show the view
that was written to the data model.div[data-view="profile"]
is initially empty.Users will want to change their profile information to suit their mood.
Allow users to navigate between their profile and the form to edit their profile details.
'edit-profile'
view.href="#"
and a data-view="edit-profile"
.'click'
listener to the document
that exits immediately if a link was not clicked.
href="#"
and a data-view="profile"
.'profile'
view if they have never saved a username
.Once a user records a journal entry, they'll want to revisit it again.
Display the user's journal entries in reverse chronological order so they can see the newest ones first.
div[data-view="entries"]
.'DOMContentLoaded'
event is fired.A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.