rename the app

messages/public/css/style.css

@@ -0,0 +1,428 @@
+:root {
+  --font-size: 18px;
+  --desktop-heading-font-size: 5em;
+  --desktop-line-height: 1;
+  --mobile-heading-font-size: 4em;
+  --mobile-line-height: 0.8;
+  --border-radius-sm: 0.5em;
+  --border-radius-md: 0.7em;
+  --border-radius-lg: 1em;
+
+  /* colors */
+
+  --100-blue: hsl(219, 64%, 96%, 100%);
+  --200-blue: hsl(222, 81%, 94%, 100%);
+  --300-blue: hsl(221, 86%, 92%, 100%);
+  --400-blue: hsl(222, 92%, 90%, 100%);
+  --500-blue: hsl(222, 97%, 88%, 100%);
+  --600-blue: hsl(222, 97%, 85%, 100%);
+  --700-blue: hsl(222, 100%, 84%, 100%);
+  --800-blue: hsl(222, 100%, 34%, 100%);
+}
+/* 1. Use a more-intuitive box-sizing model */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* 2. Remove default margin */
+* {
+  margin: 0;
+}
+
+body {
+  /* 3. Add accessible line-height */
+  line-height: 1.5;
+  /* 4. Improve text rendering */
+  -webkit-font-smoothing: antialiased;
+  font-family: "Lato, serif";
+  background: var(--100-blue);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* 5. Improve media defaults */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/* 6. Inherit fonts for form controls */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* 7. Avoid text overflows */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+/* 8. Improve line wrapping */
+p {
+  text-wrap: pretty;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
+a {
+  color: var(--800-blue);
+  text-decoration: none;
+}
+
+/*
+  9. Create a root stacking context
+*/
+#root,
+#__next {
+  isolation: isolate;
+}
+
+nav {
+  font-size: 1.5rem;
+  padding: 1em 0;
+}
+
+nav > ul {
+  list-style: none;
+  text-align: center;
+  margin: 0 auto;
+}
+
+ul {
+  padding: 0;
+  margin: auto;
+  justify-content: space-around;
+  max-width: 80vw;
+}
+
+ul > li {
+  display: inline-block;
+  text-align: center;
+}
+
+li a {
+  color: black;
+}
+
+form {
+  width: 100%;
+  max-width: 50vw;
+}
+
+input {
+  padding: 0.75em;
+}
+
+footer {
+  margin-top: auto;
+  padding: 2em;
+}
+
+/*.full-page {*/
+/*  height: 90vh;*/
+/*}*/
+
+.divider {
+  height: 0.25em;
+  background: var(--300-blue);
+  width: 80vw;
+  margin: 0 auto 1em;
+}
+
+.flex {
+  display: flex;
+}
+
+.col {
+  flex-direction: column;
+}
+
+.container.flex.hero {
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+}
+
+.container.hero {
+  text-align: center;
+}
+
+.container.hero * {
+  margin: 0.5em 0;
+}
+
+.container.hero p {
+  font-size: 1.2rem;
+  padding: 1em;
+}
+
+.center-horizontal {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1em;
+  margin: 0 auto;
+}
+
+.hero__heading {
+  margin: 0;
+  font-size: var(--mobile-heading-font-size);
+  font-family: "Rokkitt", serif;
+  line-height: var(--desktop-line-height);
+}
+
+.btn {
+  display: inline-block;
+  width: 100%;
+  padding: 1em;
+  text-decoration: none;
+  border-radius: 0.7em;
+  font-size: 1em;
+}
+
+.btn__link {
+  text-align: center;
+  background: #f0f0f0;
+  line-height: 1.5em;
+  max-width: 200px;
+}
+
+.btn__link:hover {
+  background: #bfbba9;
+}
+
+.btn__form {
+  background: #f0f0f0;
+}
+
+.btn__form:hover {
+  background: #bfbba9;
+}
+
+.hero > .btn__link {
+  margin-top: 2em;
+}
+
+#main {
+  padding: 0 50px;
+}
+
+#main > .container.flex {
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.feed-heading {
+  margin-left: 1em;
+  text-transform: capitalize;
+  text-align: center;
+}
+
+.feed-heading span {
+  text-transform: initial;
+}
+
+.author__meta {
+  gap: 0.5em;
+}
+
+.grid {
+  display: grid;
+  /*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));*/
+  gap: 1em;
+  padding: 2em;
+  grid-auto-flow: dense;
+  margin: 0 auto;
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 2em;
+  position: relative;
+}
+
+.grid-item.card {
+  border: 1px solid black;
+  border-radius: 0.5em;
+  text-align: center;
+  background: var(--500-blue);
+}
+
+.grid-item > p {
+  padding: 5em;
+}
+
+.grid__card__metadata {
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  font-size: 0.8em;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 0.9em 0.7em;
+}
+
+.likes {
+  display: flex;
+  align-self: center;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+}
+
+.card__likes {
+  padding: 0;
+  font-weight: 400;
+}
+
+.timestamp {
+  font-weight: 300;
+}
+
+.card .card__message {
+  margin-bottom: 1em;
+}
+
+.form-item {
+  flex-direction: column;
+  width: 100%;
+  margin: 0.5em 0;
+}
+
+.form-item.flex label {
+  text-align: left;
+  padding-left: 0.2em;
+}
+
+.form-item-row {
+  flex-direction: column;
+  width: 100%;
+  margin: 0.5em 0;
+  gap: 0.5em;
+}
+
+.hover__underline {
+  /*display: inline-block;*/
+  position: relative;
+}
+
+.red {
+  color: red;
+}
+
+.hover__underline::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: var(--700-blue);
+  transform-origin: bottom left;
+  transition: transform 0.25s ease-out;
+}
+
+.hover__underline:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+
+.hidden {
+  display: none;
+}
+
+.social-icons {
+  gap: 0.5em;
+  justify-content: baseline;
+}
+
+.social-icons a {
+  font-size: 1.2em;
+  color: var(--800-blue);
+}
+
+@media only screen and (min-width: 750px) {
+  /*ul {*/
+  /*  max-width: 40vw;*/
+  /*}*/
+  .hero__heading {
+    margin: 0;
+    font-size: var(--desktop-heading-font-size);
+    font-family: "Rokkitt", serif;
+    line-height: var(--desktop-line-height);
+  }
+  .container.hero p {
+    font-size: 1.5rem;
+    padding: 0.5em;
+  }
+  .container.flex * {
+    flex: 1;
+  }
+  #main {
+    padding: 0 100px;
+  }
+
+  #main > .container.flex {
+    gap: 10em;
+  }
+
+  .grid {
+    width: 100%;
+    max-width: 750px;
+  }
+  .grid__span_two {
+    grid-column-end: span 2;
+  }
+  .form-item-row {
+    flex-direction: row;
+    width: 100%;
+    margin: 0.5em 0;
+    gap: 0.5em;
+  }
+
+  .nav__profile {
+    position: relative;
+  }
+
+  .nav__hover {
+    position: absolute;
+    background: var(--100-blue);
+    border: 2px solid black;
+    width: 100%;
+    /*max-width: 150px;*/
+    border-radius: var(--border-radius-sm);
+    z-index: 1;
+  }
+
+  /*.form-item > .btn {*/
+  /*  max-width: 200px;*/
+  /*}*/
+}

messages/public/js/script.js

@@ -0,0 +1,109 @@
+function usernameValidation(username) {
+  const errors = [];
+  if (username.length < 5) {
+    errors.push("*username must be at least 8 characters");
+  }
+
+  if (username.includes(" ")) {
+    errors.push("*username must not contain any spaces");
+  }
+
+  return errors;
+}
+
+function checkStringForNumber(str) {
+  for (i = 0; i < str.length; i++) {
+    if (!isNaN(str[i])) return true;
+  }
+  return false;
+}
+
+function checkStringForChar(str) {
+  return /[!#%^,\.]/.test(str);
+}
+
+function passwordValidation(password) {
+  const errors = [];
+
+  if (password.length < 8) {
+    errors.push("*password must be at least 8 characters");
+  }
+
+  if (!checkStringForNumber(password)) {
+    errors.push("*password must include a number.");
+  }
+  if (!checkStringForChar(password)) {
+    errors.push("*password must include a special character. !#%^,.");
+  }
+
+  return errors;
+}
+
+function formValidator() {
+  const username = document.querySelector('input[name="username"]');
+  const password = document.querySelector('input[name="password"]');
+  const passwordConfirmation = document.querySelector(
+    'input[name="password-confirmation"]',
+  );
+
+  if (username && password && passwordConfirmation) {
+    username.addEventListener("keyup", () => {
+      let errors = usernameValidation(username.value);
+      let errorDiv = username.nextElementSibling;
+      errorDiv.textContent = "";
+
+      if (errors.length > 0) {
+        errors.forEach((err) => {
+          const p = document.createElement("p");
+          p.textContent = err;
+          errorDiv.appendChild(p);
+        });
+      } else {
+        errorDiv.textContent = "";
+      }
+    });
+
+    password.addEventListener("keyup", (e) => {
+      let errorDiv = password.nextElementSibling;
+      errorDiv.textContent = "";
+      let errors = passwordValidation(e.target.value);
+
+      if (errors.length > 0) {
+        errors.forEach((err) => {
+          const p = document.createElement("p");
+          p.textContent = err;
+          errorDiv.appendChild(p);
+        });
+      } else {
+        errorDiv.textContent = "";
+      }
+    });
+
+    passwordConfirmation.addEventListener("keyup", (e) => {
+      let error = "*passwords do not match!";
+      let errorDiv = passwordConfirmation.nextSibling;
+
+      if (password.value !== e.target.value) {
+        errorDiv.textContent = error;
+      } else {
+        errorDiv.textContent = "";
+      }
+    });
+  }
+}
+
+function navProfileHover() {
+  const profile = document.querySelector(".nav__profile");
+  if (profile) {
+    const profileHover = document.querySelector(".nav__hover");
+    profile.addEventListener("mouseleave", () => {
+      profileHover.classList.add("hidden");
+    });
+    profile.addEventListener("mouseenter", () => {
+      profileHover.classList.remove("hidden");
+    });
+  }
+}
+
+navProfileHover();
+formValidator();