Merge branch 'ping-coming-soon'
This commit is contained in:
commit
000c8ab449
|
|
@ -0,0 +1 @@
|
|||
.DS_Store
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"esversion": 6,
|
||||
"browser": true,
|
||||
"strict": "global"
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
# Frontend Mentor - Ping coming soon page
|
||||
|
||||
|
||||
|
||||
## Welcome! 👋
|
||||
|
||||
Thanks for checking out this front-end coding challenge.
|
||||
|
||||
[Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow.
|
||||
|
||||
**To do this challenge, you need a basic understanding of HTML, CSS and JavaScript.**
|
||||
|
||||
## The challenge
|
||||
|
||||
Your challenge is to build out this Coming Soon page and get it looking as close to the design as possible.
|
||||
|
||||
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
|
||||
|
||||
Your users should be able to:
|
||||
|
||||
- View the optimal layout for the site depending on their device's screen size ✅
|
||||
- See hover states for all interactive elements on the page ✅
|
||||
- Submit their email address using an `input` field ✅
|
||||
- Receive an error message when the `form` is submitted if: ✅
|
||||
- The `input` field is empty. The message for this error should say *"Whoops! It looks like you forgot to add your email"* ✅
|
||||
- The email address is not formatted correctly (i.e. a correct email address should have this structure: `name@host.tld`). The message for this error should say *"Please provide a valid email address"* ✅
|
||||
|
||||
Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel.
|
||||
|
||||
## Where to find everything
|
||||
|
||||
Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to.
|
||||
|
||||
The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes.
|
||||
|
||||
If you would like the Sketch file in order to see sizes etc, it is available to download from the challenge page.
|
||||
|
||||
You will find all the required assets in the `/images` folder. The assets are already optimized.
|
||||
|
||||
There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts.
|
||||
|
||||
## Building your project
|
||||
|
||||
Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps:
|
||||
|
||||
1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/).
|
||||
2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel below.
|
||||
3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles.
|
||||
4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content.
|
||||
5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`.
|
||||
6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on.
|
||||
7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](https://bit.ly/fm-sizzy). It's a great browser that makes it easy to view your site across multiple devices.
|
||||
|
||||
## Deploying your project
|
||||
|
||||
As mentioned above, there are a number of ways to host your project for free. We recommend using [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started:
|
||||
|
||||
1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration.
|
||||
2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy.
|
||||
3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/dashboard). You will also receive an email for each deployment with the URL.
|
||||
|
||||
## Sharing your solution
|
||||
|
||||
There are multiple places you can share your solution:
|
||||
|
||||
1. Submit it on the platform so that other users will see your solution on the site. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that.
|
||||
2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack).
|
||||
3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around.
|
||||
|
||||
## Giving feedback
|
||||
|
||||
Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io.
|
||||
|
||||
This challenge is completely free. Please share it with anyone who will find it useful for practice.
|
||||
|
||||
**Have fun building!** 🚀
|
||||
|
||||
## Community Sponsors
|
||||
|
||||
A massive thank you to our community sponsors!
|
||||
|
||||
- [Sizzy](https://bit.ly/fm-sizzy) is an extremely useful browser designed specifically to improve a developer's workflow when building websites. You can fire up multiple device emulators and run them all in sync while building out your web pages. Perfect for helping build fully responsive websites!
|
||||
- [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into!
|
||||
- [Dracula PRO](https://bit.ly/fem-dracula) is a beautiful dark theme to help keep you focused and productive while you code. The theme isn't just for your editor either. You can also apply it to your most-used apps like your terminal and even Slack!
|
||||
|
|
@ -0,0 +1,321 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;600;700&display=swap');
|
||||
|
||||
:root {
|
||||
/* primary */
|
||||
font-size: 20px;
|
||||
--site-blue: hsl(223, 87%, 63%);
|
||||
/* secondary */
|
||||
--site-paleBlue: hsl(223, 100%, 88%);
|
||||
--site-lightRed: hsl(354, 100%, 66%);
|
||||
/* neutral */
|
||||
--site-gray: hsl(0, 0%, 59%);
|
||||
--site-veryDarkBlue: hsl(209, 33%, 12%);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Libre Franklin', sans-serif;
|
||||
min-width: 375px;
|
||||
}
|
||||
|
||||
.flexContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
.logoSection {
|
||||
margin-top: 4.2rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logoSection img {
|
||||
width: 66%;
|
||||
}
|
||||
|
||||
.titleSection {
|
||||
margin-top: 1.95rem;
|
||||
}
|
||||
|
||||
.titleSection p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.titleSection .line1 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 300;
|
||||
color: var(--site-gray);
|
||||
}
|
||||
|
||||
.line1 b {
|
||||
color: black;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.titleSection .line2 {
|
||||
margin-top: 0.9rem;
|
||||
font-size: 12px;
|
||||
color: var(--site-gray);
|
||||
}
|
||||
|
||||
.formSection {
|
||||
margin: 1.6rem 0 0 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.formSection form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 83%;
|
||||
}
|
||||
|
||||
.formSection input[type=text] {
|
||||
font-family: 'Libre Franklin', sans-serif;
|
||||
width: calc(100% - 47px); /* shrink width by padding left+right + border */
|
||||
|
||||
color: black;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
border: 1px solid var(--site-paleBlue);
|
||||
padding-top: 0.55rem;
|
||||
padding-bottom: 0.55rem;
|
||||
padding-left: 25px;
|
||||
padding-right: 20px;
|
||||
text-align: justify;
|
||||
text-decoration: none;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
input[type="text"].errorBorder {
|
||||
border-color: var(--site-lightRed);
|
||||
}
|
||||
|
||||
.formSection input::placeholder{
|
||||
padding-left: 8px;
|
||||
color: var(--site-paleBlue);;
|
||||
}
|
||||
|
||||
.formSection button {
|
||||
font-family: 'Libre Franklin', sans-serif;
|
||||
width: 100%;
|
||||
background-color: var(--site-blue);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
border: none;
|
||||
padding: 0.625rem 0;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
border-radius: 32px;
|
||||
box-shadow: 0px 3px 10px 1px var(--site-paleBlue);
|
||||
}
|
||||
|
||||
.notifyButton.notifyError {
|
||||
transform: translate(0, 1.6rem);
|
||||
}
|
||||
|
||||
.errorSection {
|
||||
height: 0;
|
||||
padding: 0;
|
||||
transform: translate(0, 0.35rem);
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
font-style: italic;
|
||||
font-size: 10px;
|
||||
opacity: 0;
|
||||
color: var(--site-lightRed);
|
||||
}
|
||||
|
||||
.errorMessage.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.imageSection {
|
||||
margin-top: 3.4rem;
|
||||
text-align: center;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.imageSection img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
text-align: center;
|
||||
/* width: 100vw; */
|
||||
}
|
||||
.socialButtonsSection {
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.socialButtonsSection a {
|
||||
color: var(--site-blue);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.socialButtonsSection .icon-background {
|
||||
color: var(--site-blue);
|
||||
padding:8px;
|
||||
border-radius: 50%;
|
||||
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
text-align: center;
|
||||
line-height: 15px;
|
||||
vertical-align: middle;
|
||||
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.icon-background:hover {
|
||||
color: white;
|
||||
background-color: var(--site-blue);
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: var(--site-gray);
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
margin-bottom: 1.15rem;
|
||||
}
|
||||
|
||||
/* Feel free to remove these styles or customise in your own stylesheet 👍 */
|
||||
.attribution { font-size: 11px; text-align: center; }
|
||||
.attribution a i { color: hsl(228, 45%, 44%); }
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.flexContainer {
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
.formSection button {
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) and (max-width: 1050px) {
|
||||
.flexContainer {
|
||||
width: 75vw;
|
||||
}
|
||||
|
||||
.formSection button {
|
||||
margin-top: 0.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 1050px) {
|
||||
.flexContainer {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
.logoSection {
|
||||
margin-top: 4.3rem;
|
||||
}
|
||||
|
||||
.logoSection img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.titleSection {
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.titleSection .line1 {
|
||||
font-weight: 300;
|
||||
letter-spacing: 1.3px;
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
.line1 b {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.titleSection .line2 {
|
||||
margin-top: 0.95rem;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
.formSection {
|
||||
margin: 2rem 0 0 0;
|
||||
}
|
||||
|
||||
.formSection form {
|
||||
flex-direction: row;
|
||||
width: 88%;
|
||||
}
|
||||
|
||||
.formSection input[type=text] {
|
||||
flex-basis: 66%;
|
||||
|
||||
font-size: 17px;
|
||||
font-weight: 300;
|
||||
padding-top: 0.85rem;
|
||||
padding-bottom: 0.85rem;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.formSection button {
|
||||
margin-left: 1rem;
|
||||
flex-basis: 34%;
|
||||
|
||||
font-size: 17px;
|
||||
font-weight: 300;
|
||||
|
||||
padding: 0.85rem 0;
|
||||
box-shadow: 0px 3px 10px 1px var(--site-paleBlue);
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.notifyButton.notifyError {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.errorSection {
|
||||
order: 1;
|
||||
height: 0;
|
||||
width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transform: translate(0, 3.2rem);
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
font-size: 13px;
|
||||
width: 16rem;
|
||||
height: 2rem;
|
||||
overflow: auto;
|
||||
text-align: left;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.imageSection {
|
||||
margin-top: 4.3rem;
|
||||
width: 89%;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 12px;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="86" height="26"><g fill="none"><path fill="#15202A" d="M5.008 25c.555 0 .832-.245.832-.736v-8c0-.235.117-.352.352-.352h4.8c2.603 0 4.699-.635 6.288-1.904 1.59-1.27 2.384-3.056 2.384-5.36 0-1.621-.41-2.987-1.232-4.096-.821-1.11-1.93-1.936-3.328-2.48-1.397-.544-2.981-.816-4.752-.816h-9.6c-.341 0-.512.203-.512.608V24.36c0 .213.048.373.144.48.096.107.272.16.528.16h4.096zm5.216-13.088H6.288c-.17 0-.288-.048-.352-.144-.064-.096-.096-.25-.096-.464V5.832c0-.213.048-.363.144-.448.096-.085.25-.128.464-.128H10c1.195 0 2.144.277 2.848.832.704.555 1.056 1.376 1.056 2.464 0 1.045-.33 1.867-.992 2.464-.661.597-1.557.896-2.688.896zM27.856 25c.32 0 .544-.059.672-.176.128-.117.192-.315.192-.592v-22.4c0-.384-.17-.576-.512-.576h-4.576c-.341 0-.512.203-.512.608v22.464c0 .235.053.405.16.512.107.107.288.16.544.16h4.032zm9.312 0c.235 0 .4-.037.496-.112.096-.075.144-.197.144-.368V10.344c0-.107.037-.17.112-.192.075-.021.155.021.24.128l10.208 14.336c.128.17.245.277.352.32.107.043.256.064.448.064H52.4a.66.66 0 00.432-.144.455.455 0 00.176-.368V1.736c0-.32-.139-.48-.416-.48H49.04c-.384 0-.576.192-.576.576v13.216c0 .235-.053.352-.16.352-.085 0-.192-.085-.32-.256L38.576 1.736c-.15-.213-.277-.347-.384-.4-.107-.053-.288-.08-.544-.08h-3.872c-.384 0-.576.203-.576.608v22.592c0 .363.213.544.64.544h3.328zm30.176.32c1.664 0 3.013-.288 4.048-.864a9.158 9.158 0 002.672-2.24c.15-.17.256-.181.32-.032l.928 2.304c.192.341.47.512.832.512h1.024c.15 0 .267-.043.352-.128a.476.476 0 00.128-.352V13.736a.703.703 0 00-.24-.56c-.16-.139-.39-.208-.688-.208l-8.544-.032c-.341 0-.512.15-.512.448v2.4c0 .192.043.33.128.416.085.085.213.128.384.128h3.872c.235 0 .352.096.352.288 0 .085-.01.15-.032.192l-.064.928c-.235 1.045-.736 1.915-1.504 2.608-.768.693-1.792 1.04-3.072 1.04-1.685 0-2.976-.65-3.872-1.952-.896-1.301-1.344-3.435-1.344-6.4 0-2.837.427-4.907 1.28-6.208.853-1.301 2.101-1.952 3.744-1.952 1.259 0 2.283.363 3.072 1.088.79.725 1.29 1.643 1.504 2.752.043.192.096.325.16.4.064.075.181.112.352.112l4.224-.64c.277-.021.416-.15.416-.384 0-.192-.021-.352-.064-.48-.213-1.173-.752-2.277-1.616-3.312-.864-1.035-1.984-1.872-3.36-2.512-1.376-.64-2.896-.96-4.56-.96-2.176 0-4.096.501-5.76 1.504-1.664 1.003-2.955 2.432-3.872 4.288-.917 1.856-1.376 4.021-1.376 6.496 0 2.41.437 4.528 1.312 6.352.875 1.824 2.117 3.237 3.728 4.24 1.61 1.003 3.493 1.504 5.648 1.504z"/><path fill="#4C7BF3" d="M85.072 25c.32 0 .55-.059.688-.176.139-.117.208-.315.208-.592v-4c0-.363-.16-.544-.48-.544h-4.384a.498.498 0 00-.368.144c-.096.096-.144.24-.144.432v4.064c0 .448.235.672.704.672h3.776z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
|
||||
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<title>Frontend Mentor | Ping coming soon page</title>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="flexContainer">
|
||||
<header>
|
||||
<div class="logoSection">
|
||||
<img src="./images/logo.svg" alt="Ping logo" class="logo">
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<div class="titleSection">
|
||||
<p class="line1">We are launching <b class="line1Bold">soon!</b></p>
|
||||
<p class="line2">Subscribe and get notified</p>
|
||||
</div>
|
||||
<div class="formSection">
|
||||
<form name="emailForm" action="submit" onsubmit="return validateEmailAddress()">
|
||||
<!-- challenge requires us to do validation of this field, therefore NOT using type="email" -->
|
||||
<input type="text" name="emailInput" id="emailInput" placeholder="Your email address..." onfocus="clearError()">
|
||||
<div class="errorSection" id="errorSection" > <!-- hidden -->
|
||||
<p class="errorMessage" id="errorMessage">Placeholder Text</p>
|
||||
</div>
|
||||
<button class="notifyButton" id="notifyButton">Notify Me</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="imageSection">
|
||||
<img src="./images/illustration-dashboard.png" alt="Illustration of the dashboard" class="mockupImage">
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="socialButtonsSection">
|
||||
<a href="https://facebook.com/tarasis"><i class="fab fa-facebook-f icon-background"></i></a>
|
||||
<a href="https://twitter.com/tarasis"><i class="fab fa-twitter icon-background"></i></a>
|
||||
<a href="https://www.instagram.com/tarasis/"><i class="fab fa-instagram icon-background"></i></a>
|
||||
</div>
|
||||
<p class="copyright">
|
||||
© Copyright Ping. All rights reserved.
|
||||
</p>
|
||||
<p class="attribution">
|
||||
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
|
||||
Coded by <a href="mailto:work@tarasis.net">Robert McGovern</a>.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
<script src="./js/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
"use strict";
|
||||
|
||||
const console = window.console;
|
||||
const emailInput = document.getElementById("emailInput");
|
||||
const errorMessage = document.getElementById("errorMessage");
|
||||
const errorSection = document.getElementById("errorSection");
|
||||
const notifyButton = document.getElementById("notifyButton");
|
||||
|
||||
const errorMessageForgotAddress = "Whoops! It looks like you forgot to add your email";
|
||||
const errorMessageInvalidAddress = "Please provide a valid email address";
|
||||
|
||||
/*
|
||||
* this is my "simple" regex for email addresses. It does not cover all the possibilities that are allowed
|
||||
* for the local and domain parts. For a more "correct" / comprehensive regex, there is one at
|
||||
* https://stackoverflow.com/questions/3844431/are-email-addresses-allowed-to-contain-non-alphanumeric-characters
|
||||
*
|
||||
* For local part you can use ASCII:
|
||||
* Latin letters A - Z a - z
|
||||
* digits 0 - 9
|
||||
* special characters !#$%&'*+-/=?^_`{|}~
|
||||
* dot ., that it is not first or last, and not in sequence
|
||||
* space and "(),:;<>@[] characters are allowed with restrictions (they are only allowed inside a quoted string, a backslash or double-quote must be preceded by a backslash)
|
||||
* Plus since 2012 you can use international characters above U+007F, encoded as UTF-8.
|
||||
*
|
||||
* Domain part is more restricted:
|
||||
* Latin letters A - Z a - z
|
||||
* digits 0 - 9
|
||||
* hyphen -, that is not first or last, multiple hyphens in sequence are allowed.
|
||||
*
|
||||
* Recommended regex is: ^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})
|
||||
*/
|
||||
const validEmailFormat = /^[A-Za-z0-9][\w\+]*@[A-Za-z0-9]{3,}\.[A-Za-z]{2,}$/i;
|
||||
|
||||
|
||||
/*
|
||||
* Don't quite see the point in this, setting "type=email" does some validation
|
||||
* Setting the input to "required" prevents submitting an empty field
|
||||
*
|
||||
* Only benefit I see is the being able to set an error message
|
||||
* Maybe one form of solution is doing exactly that. Use onclick event on the button
|
||||
* if the field is empty, unhide the error field
|
||||
*/
|
||||
function validateEmailAddress() {
|
||||
const submittedEmailAddress = document.forms.emailForm.emailInput.value;
|
||||
// test email is valid via regex
|
||||
const isValidEmailAddress = validEmailFormat.test(submittedEmailAddress);
|
||||
|
||||
if (submittedEmailAddress.length === 0) {
|
||||
showError(errorMessageForgotAddress);
|
||||
return false;
|
||||
} else if (!isValidEmailAddress) {
|
||||
showError(errorMessageInvalidAddress);
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
errorMessage.innerText = message;
|
||||
errorMessage.classList.add("visible");
|
||||
emailInput.classList.add("errorBorder");
|
||||
notifyButton.classList.add("notifyError");
|
||||
// errorSection.hidden = false;
|
||||
}
|
||||
|
||||
/*
|
||||
* (Possibly) To be called as user types in the email field. If an error message has been shown,
|
||||
* then hide the message and return the fields to normal
|
||||
*/
|
||||
function clearError() {
|
||||
errorMessage.classList.remove("visible");
|
||||
emailInput.classList.remove("errorBorder");
|
||||
notifyButton.classList.remove("notifyError");
|
||||
// errorSection.hidden = true;
|
||||
}
|
||||
|
||||
function testRegex() {
|
||||
console.log("Should all be false");
|
||||
console.log(validEmailFormat.test("submittedEmailAddress"));
|
||||
console.log(validEmailFormat.test("s@.NET"));
|
||||
console.log(validEmailFormat.test("@"));
|
||||
console.log(validEmailFormat.test("@."));
|
||||
console.log(validEmailFormat.test("@.net"));
|
||||
console.log(validEmailFormat.test("@tarasis.net"));
|
||||
console.log(validEmailFormat.test("adsadasds@"));
|
||||
console.log(validEmailFormat.test("__submittedEmailAddress"));
|
||||
console.log(validEmailFormat.test("spam@tarasis.99"));
|
||||
console.log(validEmailFormat.test("rob@.net"));
|
||||
console.log(validEmailFormat.test("spam@tarasis"));
|
||||
console.log(validEmailFormat.test("spam@tarasis.a"));
|
||||
console.log(validEmailFormat.test("s@ta.net"));
|
||||
console.log(validEmailFormat.test("_@tarasis.net"));
|
||||
console.log(validEmailFormat.test("_3@tarasis.net"));
|
||||
|
||||
console.log("\n Should all be true");
|
||||
console.log(validEmailFormat.test("spam@tarasis.net"));
|
||||
console.log(validEmailFormat.test("rob@tad.io"));
|
||||
console.log(validEmailFormat.test("s@tarasis.net"));
|
||||
console.log(validEmailFormat.test("s@tarasis.net"));
|
||||
console.log(validEmailFormat.test("s_@tarasis.net"));
|
||||
console.log(validEmailFormat.test("s+blah@tarasis.net")); // this can be true, some servers use this for filtering
|
||||
}
|
||||
|
||||
// testRegex();
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
# Front-end Style Guide
|
||||
|
||||
## Layout
|
||||
|
||||
The designs were created to the following widths:
|
||||
|
||||
- Mobile: 375px x 812px (design file is 750x1624)
|
||||
- Desktop: 1440px x 1024px
|
||||
|
||||
## Colors
|
||||
|
||||
### Primary
|
||||
|
||||
- Blue: hsl(223, 87%, 63%)
|
||||
|
||||
### Secondary
|
||||
|
||||
- Pale Blue: hsl(223, 100%, 88%)
|
||||
- Light Red: hsl(354, 100%, 66%)
|
||||
|
||||
### Neutral
|
||||
|
||||
- Gray: hsl(0, 0%, 59%)
|
||||
- Very Dark Blue: hsl(209, 33%, 12%)
|
||||
|
||||
## Typography
|
||||
|
||||
### Body Copy
|
||||
|
||||
- Font size: 20px
|
||||
|
||||
### Fonts
|
||||
|
||||
- Family: [Libre Franklin](https://fonts.google.com/specimen/Libre+Franklin)
|
||||
- Weights: 300, 600, 700
|
||||
|
||||
## Icons
|
||||
|
||||
For the social icons, you can use a font icon library. Some suggestions can be found below:
|
||||
|
||||
- [Font Awesome](https://fontawesome.com)
|
||||
- [IcoMoon](https://icomoon.io)
|
||||
- [Ionicons](https://ionicons.com)
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 55 KiB |
|
|
@ -0,0 +1,105 @@
|
|||
6th Sept 2020
|
||||
|
||||
Next project, decided to go for something slightly different with a little JavaScript required.
|
||||
Added basic files for css and javascript, including a .jshintrc file
|
||||
|
||||
```
|
||||
{
|
||||
"esversion": 6,
|
||||
"browser": true,
|
||||
"strict": "global"
|
||||
}
|
||||
```
|
||||
|
||||
Set up basic styling into the CSS from the style doc. Add colors, font + sizes.
|
||||
|
||||
Add font awesome to index.html + setup attribution
|
||||
|
||||
Add basic tags to index.html for header/main/footer, then in main splitting into 3, text headings, form and dashboard illustration.
|
||||
|
||||
__Q should the copyright be added to the footer or the bottom of the main????__
|
||||
|
||||
Started mostly with mobile
|
||||
|
||||
spent the morning struggling to get flex to work the way I wanted. Got there but also realised that I didn't need to use it the way I did. *facepalm*
|
||||
|
||||
Continue to play with positioning rather than focusing on main styling
|
||||
|
||||
Nudge screenshot nudge screenshot nudge screenshot *sigh*
|
||||
I'm not OCD I swear ...
|
||||
|
||||
Realised better to social icons into footer and move the footer out of the flex container, and clamp it to the bottom.
|
||||
|
||||
So mobile is virtually there. The Ping! logo is slightly off, as is the "We are launching soon!"
|
||||
So close *sigh*
|
||||
|
||||
Day break
|
||||
|
||||
Spent 20 minutes playing with mobile positioning. Crazy I know, but its like __near__ spot on.
|
||||
|
||||
|
||||
|
||||
Worked on the desktop matching. Went much quicker, and getting faster at eyeballing sizes/size differences
|
||||
Was easier working on mobile first, and then adjusted for desktop on this one.
|
||||
|
||||
|
||||
|
||||
Now to remove extra adjustments that aren't needed (because they are duplicates of further up the page.)
|
||||
|
||||
Final steps:
|
||||
Add JS error checking on submit button (valid email address, and error on submit on an empty field (although my preference really is disable the button if nothing is in the field))
|
||||
An error will trigger a text line to appear in red
|
||||
And change the border color of the input email field to red.
|
||||
Hover States for Social Buttons (flip colors)
|
||||
|
||||
Attempted to use hover state to change the background of the fa-stack but it wasn't triggering. Could only change the color of the item at the top of the stack (i.e the social icon)
|
||||
Learnt you can change css of other elemnts when hovering over a different one ... sorta. Has to be a child you are changing, https://stackoverflow.com/questions/19121223/css-change-an-element-content-on-hover-from-different-element
|
||||
|
||||
Next Day:
|
||||
|
||||
Realised I had to change a few things. Change the input field from `type="email"` to `type="text"` so that I can do the field validation.
|
||||
|
||||
Added a div that starts as hidden and has no text
|
||||
|
||||
Added some css styling for the text color, and added an error class for changing the input fields border
|
||||
|
||||
In JavaScript created a couple of functions, the first that has to return true/false when the user presses "Notify Me" (basically onsubmit event), does some validation of address length, and address structure.
|
||||
|
||||
The other method reveals the hidden div and sets the input fields border to red.
|
||||
|
||||
There is a third method that I couldn't decide about using. It will clear the error message. The idea being that as soon as the user starts typing again in the field that the error is cleared. (or better yet, when the field gets focus again. I can check for that? )
|
||||
|
||||
Created a simplistic regex for email address validation, with some test cases to check my logic. I'm still learning regex, and I don't want to spend the time learning all the combinations for email addresses.
|
||||
|
||||
I did research and find a more "correct" regex that I could use, but I will stick with my for this sample.
|
||||
|
||||
Played with alignment so mobile & mobile error are close.
|
||||
|
||||
|
||||
|
||||
Swapped method of doing the circles around the social icons. I would have preferred the stacks but I couldn't figure out how to put a thin border around a fa-circle
|
||||
|
||||
BUGS:
|
||||
* ~~when screen not tall enough social buttons and copyright pushed up the page because I clamped them to the bottom of the browser window, rather than the page.~~
|
||||
* ~~because I used attacked circles I can't just change the background to blue for hover. Need to either sub in a filled circle on hover OR swap to manually creating the circle~~
|
||||
* ~~transitions sizes between 600 and about 800 look wrong / bad / odd~~ (improved but thats it)
|
||||
|
||||
The transition thing is really bad
|
||||
|
||||
|
||||
|
||||
How to better handle this?????? Should be dynamic font sizing & padding I guess?
|
||||
I have a working solution the error message on the 1440x1024 resolution but it doesn't look good/work on the in between resolutions. Positioning should be calculated, based on resolution
|
||||
|
||||
To Research:
|
||||
* Dynamic font sizing to look nicer transitioning up.
|
||||
|
||||
Found a formula to scale the fonts, tried to use it to work with the view port width scaling but it wouldn't work.
|
||||
|
||||
Fixed positioning of the footer section and social buttons. Needed it back in the flexbox, and set the margin-top to auto to fill up the space
|
||||
|
||||
Last thing is my hack for the error when email field and button are in a row. How to position the text relative to the input field? Can I hide it behind it and move it down? If its in the same row, then it takes up space which we don't want, hence the 0 width (zero height for when in column)
|
||||
|
||||
Ergh. Want to be done with this. Frustrating myself.
|
||||
|
||||
MY GAWD. Eureka, just realised that what I want to use is Flexbox ordering. By doing this, the error message is first, and all I need to do is shift it downwards, no horizontal translation needed. PERFECT.
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
<li>Frontend Mentor</li>
|
||||
<ol>
|
||||
<li><a href="./FrontendMentor/huddle-landing-page-with-single-introductory-section-master/index.html">Huddle Landing Page with a Single Introductory Section</a></li>
|
||||
<li><a href="./FrontendMentor/ping-coming-soon-page-master/index.html">Ping Coming-Soon page</a></li>
|
||||
</ol>
|
||||
<li>FreecodeCamp</li>
|
||||
<li>Complete Web Development 2020</li>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
# Notes
|
||||
|
||||
## Overview
|
||||
---
|
||||
|
||||
Aim of this document is to make notes of various things as I encounter them. Consider it learning from working through specific challenges or other exercises. Probably should be in a note app, or a wiki, or something, but for now they are here.
|
||||
|
||||
Think of it as a combination of learning, and tips and tricks. They will start unorganised, and then should be put into some semblance of order; where that is possible.
|
||||
|
||||
## The Notes Themselves (unorganised)
|
||||
---
|
||||
|
||||
* Now little difference between `<input type="submit">` and `<button>`.
|
||||
* It used to be the case that IE6 didn't properly support it, so your website would look broken.
|
||||
* By default `<button>` implies `type="submit"`
|
||||
* A `button` can have child elements, an `<input type="submit">` can't. (**verify**)
|
||||
|
||||
* When using `em` the increases are compound, so if you have a `p`, inside a `div`, inside `body`. The `body` font size is set in `px`. The `div` and `p` both set a font size using `em` to set a relative size, then that relative size would be
|
||||
* in `div`: body font size * font size em
|
||||
* in `p`: div relative font size * p's font size in em
|
||||
* ```css
|
||||
body {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
font-size: 2em; /* font size is 40px */
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 2em; /* font size in this div is now 80px */
|
||||
}
|
||||
```
|
||||
|
||||
* Random aside: can't carry on a list after putting a codeblock inside a list
|
||||
* Found useful site for Regex writing / testing https://regex101.com
|
||||
* this specific address has regex for email validation https://regex101.com/r/uP2oL7/1
|
||||
|
||||
* CSS - The "!important" rule should only be used as a last resort - nuclear option
|
||||
* better to do elementName.className when wanting to temp add a class to override some css (like say a border color)
|
||||
|
||||
* Blah
|
||||
|
||||
## Articles
|
||||
|
||||
* https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/
|
||||
* https://thoughtbot.com/blog/transitions-and-transforms
|
||||
* https://www.sitepoint.com/hide-elements-in-css/
|
||||
*
|
||||
Loading…
Reference in New Issue