An HTML, CSS, and JavaScript journal app.
kaitlin-lovrich / 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.
Once a user records some journal entries, they'll want to see them.
Display the user's journal entries in reverse chronological order so they can see the newest ones first.
div[data-view="entries"]
element in the HTML.li
element within the ul
element.renderEntry
with a single parameter named entry
. This parameter represents a single object for a single entry from the data.entries
array. The function should generate and return a DOM tree for a single entry that matches the entries you created in the unordered list.document
which listens for the DOMContentLoaded
event. In the callback function for that event, loop through the data.entries
array and generate a DOM tree for each entry in the array, and append that DOM tree to the unordered list.index.html
once the user's entries are successfully being appended to the DOM on page load and replace them with a message indicating that no entries have been recorded which matches the figma.toggleNoEntries
which toggles the no entries text to show or hide when the function is called.viewSwap
with a single parameter representing the name of the view to show (the value will be either ”entries”
or ”entry-form”
). This function should show the view whose name was provided as an argument, as well as assign the string argument to the data.view
property so that the currently shown view is tracked in the data model for the application.”entries”
view. You will need to create an event handler function that utilizes the viewSwap
function to show the proper view.entry-form
. It should be styled like a button with the text NEW
, and must match the figma.submit
callback for the form to do the following:
renderEntry
function.viewSwap
to show the ”entries”
view.toggleNoEntries
function as needed to remove the no entries text.DOMContentLoaded
callback function to do the following:
viewSwap
function to show the view which was displayed prior to page refresh.toggleEntries
function as needed to show or remove the no entries text.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.
header-container
so that it matches the figma example. Make sure to take advantage of the included layout classes.data-view="entry-form"
element. This form needs to match the format shown in the example figma.required
.'input'
event listener to the Photo URL input that sets the src
attribute of the photo preview to the input's value when the user types or pastes in a new URL.'submit'
event listener to the form element that:
entryId
property to the new object, taken from the nextEntryId
property of the data model.nextEntryId
property of the data model so that if another entry is submitted later, it will receive a different entryId
.src
attribute back to the placeholder image.data.js
, add a 'beforeunload'
event listener to the window
object that serializes the data model as JSON and stores the JSON in localStorage
.data.js
, include a conditional statement that:
localStorage
.data
variable so that the user can continue adding entries to the pre-existing data model.localStorage
before each page reload.entryId
property.If a user makes a mistake when creating an entry or wants to add more notes to an entry, they should be able to edit it.
Allow users to select an existing entry to edit and pre-populate its information into the form.
renderEntry
function to do the following:
data-entry-id
attribute to the li
that stores the entryId
of the entry
being rendered.ul
in the entries view which does the following when an entry's pencil icon is clicked:
viewSwap
function to show the form.data.entries
array whose id matches the data-entry-id
attribute value of the clicked entry and assigns that entry’s object to the data.editing
property.data.editing
property.Edit Entry
data.editing
to the new object with the updated form values.data.entries
array for the edited entry with the new object with the edited data.li
with the matching data-entry-id
value with the new generated DOM tree.New Entry
.null
.If a user decides that they no longer wish to keep an entry, they should be able to delete it.
Allow users to delete an entry from its edit screen.
li
element from the DOM.toggleNoEntries
function to show the no entries text if needed.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.