| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <!-- Main Style Sheet --> | |
| <link rel="stylesheet" href="main.css" /> | |
| <!-- Font Awesome --> | |
| <link | |
| rel="stylesheet" | |
| href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" | |
| integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q" | |
| crossorigin="anonymous" | |
| /> | |
| <!-- Google Fonts --> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <title>My Diary App</title> | |
| </head> | |
| <body> | |
| <header><h1 class="title">My Personal Journal</h1></header> | |
| <!-- Journal Entry Section --> | |
| <section class="section journal-section"> | |
| <div class="container"> | |
| <div class="container-row container-row-journal"> | |
| <div class="container-item container-item-journal"> | |
| <form id="entryForm" action=""> | |
| <label for="entry-title" class="journal-label">Entry Title</label> | |
| <input | |
| type="text" | |
| name="entry-title" | |
| id="entry-title" | |
| class="entry-text-title" | |
| placeholder="Name of entry ✏️" | |
| /> | |
| <label for="entry" class="journal-label">Today's Entry</label> | |
| <textarea | |
| name="daily-entry" | |
| id="entry" | |
| class="entry-text-box" | |
| placeholder="What's on your mind today? 💭" | |
| ></textarea> | |
| <button class="btn-main entry-submit-btn" type="submit">Submit</button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Journal Entry Results --> | |
| <section class="section sectionEntryResults" id="entryResultsSection"> | |
| <div class="container"> | |
| <div class="container-row entryResultRow"></div> | |
| </div> | |
| </section> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |
| /* eslint-disable */ | |
| // My Starter JavaScript Template | |
| // Journal Entry Form | |
| const entryForm = document.querySelector(`#entryForm`); | |
| const entryResultsSection = document.querySelector(`#entryResultsSection`); | |
| const entryResultItem = document.querySelector(`.entryResultItem`); | |
| const entryResultRow = document.querySelector(`.entryResultRow`); | |
| const getEntryTitle = document.getElementsByClassName(`entry-text-title`); | |
| const getEntryText = document.getElementsByClassName(`entry-text-box`); | |
| function addEntryToDom(event) { | |
| event.preventDefault(); | |
| const d = new Date(); | |
| const month = new Array(); | |
| month[0] = 'January'; | |
| month[1] = 'February'; | |
| month[2] = 'March'; | |
| month[3] = 'April'; | |
| month[4] = 'May'; | |
| month[5] = 'June'; | |
| month[6] = 'July'; | |
| month[7] = 'August'; | |
| month[8] = 'September'; | |
| month[9] = 'October'; | |
| month[10] = 'November'; | |
| month[11] = 'December'; | |
| const n = month[d.getMonth()]; | |
| const day = d.getDay(); | |
| const year = d.getFullYear(); | |
| const heading = document.createElement(`h2`); | |
| heading.className = `heading-results`; | |
| heading.textContent = `Journal Entries`; | |
| entryResultRow.insertAdjacentElement(`beforebegin`, heading) | |
| // Adding Div | |
| const entryDiv = document.createElement(`div`); | |
| entryDiv.className = `single-entry-div`; | |
| entryResultRow.appendChild(entryDiv); | |
| // Adding Div Element h3 | |
| const entryHeading = document.createElement(`h3`); | |
| entryHeading.className = `single-entry-heading`; | |
| entryHeading.textContent = getEntryTitle[0].value; | |
| entryDiv.appendChild(entryHeading); | |
| // Adding Div Element Date | |
| const entryDate = document.createElement(`p`); | |
| entryDate.className = `single-entry-date`; | |
| // eslint-disable-next-line no-cond-assign | |
| if ((getEntryTitle[0].value = getEntryTitle[0].value)) { | |
| entryDate.textContent = `Date Added: ${day} ${n} ${year}`; | |
| entryDiv.appendChild(entryDate); | |
| } | |
| // Adding Div Element paragraph | |
| const entryParagraph = document.createElement(`p`); | |
| entryParagraph.className = `single-entry-text`; | |
| entryParagraph.textContent = getEntryText[0].value; | |
| entryDiv.appendChild(entryParagraph); | |
| getEntryText[0].value = ``; | |
| } | |
| entryForm.addEventListener(`submit`, addEntryToDom); |
Was tasked with creating a simple diary app using JS, HTML and CSS.
I just learnt the basics of event listeners, creating HTML elements in JS and how to write simple functions to add CSS via JS.
It's fully functional except when you reload the page all your data gets removed. I haven't learnt how to store entries in a database yet but someday?! :)
A Pen by Brendin Venter on CodePen.
| /* My Starter Template */ | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| margin: 0; | |
| padding: 0; | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Space Mono', monospace; | |
| line-height: 1.6; | |
| background: rgba(175, 238, 238, 0.3); | |
| color: lightcoral; | |
| margin: 0 auto; | |
| padding: 0; | |
| max-width: 900px; | |
| } | |
| /* Global Typography */ | |
| h1 { | |
| font-size: 3rem; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| } | |
| h3 { | |
| font-size: 1.5rem; | |
| } | |
| p { | |
| font-size: 1rem; | |
| } | |
| form, | |
| textarea { | |
| font-size: 1rem; | |
| } | |
| button { | |
| display: block; | |
| font-size: 1.2rem; | |
| padding: 0.5em 1em; | |
| border: none; | |
| background-color: aquamarine; | |
| color: #0a2472; | |
| font-family: 'Space Mono', monospace; | |
| } | |
| /* Section Container Positions, Spacing, Utilities */ | |
| header { | |
| text-align: center; | |
| margin: 1em auto; | |
| } | |
| .section { | |
| padding: 1em 1em; | |
| width: 100%; | |
| margin: 1em auto; | |
| } | |
| .container { | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 1em 1em; | |
| } | |
| .container-row { | |
| width: 90%; | |
| margin: 0 auto; | |
| } | |
| /* Button Standard */ | |
| .btn-main, | |
| .btn-light, | |
| .btn-dark { | |
| display: block; | |
| padding: 0.6rem 2rem; | |
| margin: 1rem; | |
| transition: all 0.1s; | |
| border: none; | |
| border-radius: 2px; | |
| cursor: pointer; | |
| } | |
| .btn-main { | |
| color: lightgoldenrodyellow; | |
| background-color: lightcoral; | |
| } | |
| .btn-light { | |
| color: #0a2472; | |
| background-color: white; | |
| } | |
| .btn-dark { | |
| color: white; | |
| background-color: #0a2472; | |
| } | |
| button[class^='btn-']:hover, | |
| a[class^='btn-']:hover, | |
| input[class^='btn-']:hover { | |
| background-color: lightgoldenrodyellow; | |
| color: lightcoral; | |
| font-weight: 700; | |
| transform: scale(1.08); | |
| } | |
| /* Project Starts Here */ | |
| /* Journal Entry Section */ | |
| /* Title */ | |
| .entry-text-title { | |
| width: 20em; | |
| margin: 1em auto; | |
| padding: 1em; | |
| border-radius: 2px; | |
| border: unset; | |
| background-color: lightgoldenrodyellow; | |
| font-family: 'Space Mono', monospace; | |
| } | |
| .entry-text-title:focus { | |
| outline-color: lightcoral; | |
| font-family: 'Space Mono', monospace; | |
| color: lightcoral; | |
| font-size: 1rem; | |
| } | |
| .entry-text-title::placeholder { | |
| color: lightcoral; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 1rem; | |
| } | |
| .entry-text-title::-ms-value { | |
| color: lightcoral; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 1rem; | |
| } | |
| /* Text Box */ | |
| .container-row-journal { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .entry-form { | |
| max-width: 100%; | |
| margin: 0 auto; | |
| } | |
| .journal-label { | |
| display: block; | |
| line-height: 1.6; | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| } | |
| .entry-text-box { | |
| width: 100%; | |
| height: 20em; | |
| margin: 1em auto; | |
| padding: 1em; | |
| border-radius: 2px; | |
| border: unset; | |
| background-color: lightgoldenrodyellow; | |
| font-family: 'Space Mono', monospace; | |
| } | |
| @media (min-width: 769px) { | |
| .entry-text-box { | |
| width: 40em; | |
| height: 20em; | |
| margin: 1em auto; | |
| padding: 1em; | |
| border-radius: 2px; | |
| border: unset; | |
| background-color: lightgoldenrodyellow; | |
| font-family: 'Space Mono', monospace; | |
| } | |
| } | |
| .entry-text-box:focus { | |
| outline-color: lightcoral; | |
| font-family: 'Space Mono', monospace; | |
| color: lightcoral; | |
| font-size: 1rem; | |
| } | |
| .entry-text-box::placeholder { | |
| color: lightcoral; | |
| font-family: 'Space Mono', monospace; | |
| font-size: 1rem; | |
| } | |
| .entry-submit-btn { | |
| margin: 0; | |
| } | |
| /* Journal Results Section */ | |
| .sectionEntryResults { | |
| width: 100%; | |
| margin: 0 auto; | |
| } | |
| .entryResultRow { | |
| /* display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| width: 100%; | |
| margin: 1em auto; */ | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .single-entry-div { | |
| max-width: 100%; | |
| margin: 1em auto; | |
| padding: 1em 1em; | |
| } | |
| .single-entry-date { | |
| background-color: lightgoldenrodyellow; | |
| width: 100%; | |
| } | |
| .heading-results { | |
| text-align: center; | |
| text-decoration: underline; | |
| text-decoration-color: lightgoldenrodyellow; | |
| } |