diff --git a/README.md b/README.md index 7ed589e..8f69cbd 100644 --- a/README.md +++ b/README.md @@ -1,107 +1,65 @@ -# AD - SBA - HTML/CSS/JavaScript +# Todowey +>. +[![NPM Version][npm-image]][npm-url] +[![Build Status][travis-image]][travis-url] +[![Downloads Stats][npm-downloads]][npm-url] +One to two paragraph statement about your product and what it does. -### Description -* In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly. +![](squares.png) -* You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor. +## How to Access Our Web To-do List -* Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements. +Chrome, Firef0x Safari: -* Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system. +```sh +Follow the Git link +``` +``` +## Usage example -* Some resources for free content: - * Photos: `https://www.pexels.com/search/template/` - * Text: `https://www.lipsum.com/` - * GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k` +Please this is a beta release of the todowey to-do list web app. future updates will be released/. -* Useful API sites: - * https://rapidapi.com/ (Links to an external site.) - * https://any-api.com/ (Links to an external site.) - * https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.) - * https://apilist.fun/ -### Deliverable: -* A theme for your site that you feel comfortable with - * Complete all technical requirements for HTML, CSS, and Javascript - * Have markups of your pages - * Research for a public API that can provide you with content (Optional) - * Include a README file. The file should include technical specifications and description of your website. - * Host on GitHub, include the link to your GitHub account in the README file(optional) - * Submit the project in a ZIP file +## Development setup +No setup required. Check our-website for updates and tutorials. +```sh +make install +npm test +``` -## Technical requirements +## Release History +* + * The first beta release + * CHANGE: Todowey +* 0.0.1 + * Work in progress -* HTML - * Have at least 3 pages, keep the grid system consistent as much as possible - * Use at least 10 different HTML tags - * Use HTML tables - * Implement at least two uses for forms - * Dropped Down Menu - * Use web fonts - * Use different types of content in the form of text, images, videos, and GIFs - * Use regex validation +## Meta -* CSS - * Inline, internal, and external styling - * Use five different CSS selectors - * Don’t use too many fonts - * Use colors that complement each other - * Use Flexbox (Optional) - * Use SASS/SCSS (Optional) - * Use animations (Optional) +Your Name – [@YourTwitter](https://perscolas) – emmanuel.orubele@gmail.com -* Javascript - * External scripts - * Use variables, if statements, loops, at least one form of collections, functions/call back, and events - * Use AJAX (Optional) - * Use JSON or XML (Optional) - * Use JQuery (Optional) +Distributed under the of Orubele.inc license. See ``LICENSE`` for more information. +[https://github.com/da7tysixers](https://github.com/da7tysixers/) +## Contributing -## How to Download +1. Fork it () +2. Create your feature branch (`git checkout -b feature/fooBar`) +3. Commit your changes (`git commit -am 'Add some fooBar'`) +4. Push to the branch (`git push origin feature/fooBar`) +5. Create a new Pull Request -#### Part 1 - Forking the Project -* To _fork_ the project, click the `Fork` button located at the top right of the project. - - -#### Part 2 - Navigating to _forked_ Repository -* Navigate to your github profile to find the _newly forked repository_. -* Copy the URL of the project to the clipboard. - -#### Part 3 - Cloning _forked_ repository -* Clone the repository from **your account** into the `~/dev` directory. - * if you do not have a `~/dev` directory, make one by executing the following command: - * * `mkdir ~/dev` - * navigate to the `~/dev` directory by executing the following command: - * * `cd ~/dev` - * clone the project by executing the following command: - * * `git clone https://github.com/${MYUSERNAME}/${NAMEOFPROJECT}` - - - - - - -## How to Submit - -#### Part 1 - _Pushing_ local changes to remote repository -* from a _terminal_ navigate to the root directory of the _cloned_ project. -* from the root directory of the project, execute the following commands: - * * add all changes - * * `git add .` - * * commit changes to be pushed - * * `git commit -m 'I have added changes'` - * * push changes to your repository - * * `git push -u origin master` - -#### Part 2 - Submitting assignment -* from the browser, navigate to the _forked_ project from **your** github account. -* click the `Pull Requests` tab. -* select `New Pull Request` + +[npm-image]: https://img.shields.io/npm/v/datadog-metrics.svg?style=flat-square +[npm-url]: https://npmjs.org/package/datadog-metrics +[npm-downloads]: https://img.shields.io/npm/dm/datadog-metrics.svg?style=flat-square +[travis-image]: https://img.shields.io/travis/dbader/node-datadog-metrics/master.svg?style=flat-square +[travis-url]: https://travis-ci.org/dbader/node-datadog-metrics +[wiki]: https://github.com/yourname/yourproject/wiki diff --git a/css/designColor.css b/css/designColor.css new file mode 100644 index 0000000..5d7e264 --- /dev/null +++ b/css/designColor.css @@ -0,0 +1,13 @@ +.navbar .collapse .navbar-nav .nav-item .nav-link ::before { + border-top: 4px solid #2196f3; + border-left: 4px solid #2196f3; +} + +.navbar .collapse .navbar-nav .nav-item .nav-link ::after { + border-bottom: 4px solid #2196f3; + border-right: 4px solid #2196f3; +} + +.mybtn { + background-color: #2196f3; +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index d17d83a..cd05bdd 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,194 @@ +/* Google Fonts*/ + +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&display=swap'); body { - background-color: navy; + text-decoration: none!important; + font-size: 16px; + font-family: 'Montserrat', sans-serif; + font-weight: 400px; +} + +.content { + max-width: 800px; + margin: auto; + padding: 10px; +} + +* { + margin: 0; + padding: 0; + outline: none; + text-decoration: none; + box-sizing: border-box; +} + +.mybtn { + text-decoration: none!important; + display: inline-block; + font-size: 1em; + font-family: montserrat, sans-serif; + font-weight: 700; + padding: 1em 2em; + color: #ffffff; + border-radius: 40px; + margin-bottom: 1em; +} + +.mybtn:hover { + color: white; + -webkit-transform: scale(1.05); + transform: scale(1.05); +} + +@media only screen and (max-width:320px) { + body { + font-size: 12px; + } +} + +.home-content .button-content { + text-decoration: none!important; + text-align: center; + margin-left: auto; + margin-right: auto; + margin-top: 20px; +} + +.selector-for-some-widget { + box-sizing: content-box; +} + +.logo { + height: 40px; + width: 40px; + left: auto; + top: auto; +} + + +/* Navbar*/ + +.navbar .collapse .navbar-nav .nav-item .nav-link { + font-size: 16px; + font-weight: 600; + text-decoration: none; + line-height: 45px; + display: block; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + text-transform: capitalize; } +.navbar .navbar-brand .todowey { + color: #302e4d; + font-family: 'Orbitron', sans-serif; + font-weight: 400; + s +} -object { - height: 100vh; - width: 100vh; +.aside .nav li a.navbar .collapse .navbar-nav .nav-item .nav-link :not(.active):hover { + padding-left: 5px; } + + +/* home section */ + +.home-content .title-content { + width: 100%; + height: 100%; + max-width: 800px; + max-height: 800px; + text-align: center; + margin-left: auto; + margin-right: auto; + margin-top: 40px; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + position: relative; +} + +.home-content .title-content h1 { + display: inline-block; + font-size: 40px; + color: #302e4d; + font-family: 'Orbitron', sans-serif; + font-weight: 700; + margin: 20px 0 5px; +} + + +/* Home-image one div */ + +.home-content .img-design { + width: 100%; + height: 100%; + max-width: 800px; + max-height: 800px; + margin-left: auto; + margin-right: auto; + margin-top: 20px; + margin-bottom: 20px; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + align-items: flex-start; + position: relative; +} + +.home-content .img-design .img-home { + width: 100%; + max-width: 800px; + max-height: 800px; + box-shadow: 0 0 1em 20px; +} + + +/* Home content before footer */ + +.padd-15 { + padding-left: 10px; + padding-right: 10px; +} + +.info { + text-align: center; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: auto; + margin-right: auto; + position: relative; +} + +.info .info-item { + -ms-flex: 0 0 60%; + flex: 0 0 60%; + max-width: 60%; + margin-top: 10px; +} + +.info-img { + width: 100%; + max-width: 800px; + max-height: 800px; +} + +.info .info-item2 { + display: inline-block; + font-size: 16px; + color: #302e4d; + font-family: 'Orbitron', sans-serif; + font-weight: 400; + margin-top: 10px; +} + +.footer-item { + background-color: black; + text-decoration: none!important; + color: white; +} \ No newline at end of file diff --git a/img/Todowey.png b/img/Todowey.png new file mode 100644 index 0000000..6b39b11 Binary files /dev/null and b/img/Todowey.png differ diff --git a/img/listImg.jpg b/img/listImg.jpg new file mode 100644 index 0000000..63c94b2 Binary files /dev/null and b/img/listImg.jpg differ diff --git a/img/squares.png b/img/squares.png new file mode 100644 index 0000000..d3cf0e5 Binary files /dev/null and b/img/squares.png differ diff --git a/img/todolist.jpg b/img/todolist.jpg new file mode 100644 index 0000000..0a32171 Binary files /dev/null and b/img/todolist.jpg differ diff --git a/index.html b/index.html index 4dc0c72..90580fc 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,169 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes. - - - - - - - - - - + + + + + + + + + + + + + + + + + + + +
+ + + +
+
+

Create Ideas and Organize it with Todowey

+
+
+ Get Started Genius +
+
+ +
+
+
+
+

Free up your mental ideas

+

Regain your genius thinking mind by writing down all your thoughts in a beautiful way. Use our todo-list and save your thoughts

+
+
+ + + + +
+ +
+ +
+ + + + + - - - + \ No newline at end of file diff --git a/js/validation.js b/js/validation.js new file mode 100644 index 0000000..4c4f201 --- /dev/null +++ b/js/validation.js @@ -0,0 +1,27 @@ +// get element + +var email = document.getElementsById('exampleInputEmail1'); +var password = document.getElementById('exampleInputPasswords'); +var form = document.getElementById('form'); +var errorValue = document.getElementById('error') + + +form.addEventListener('submit', (e) => { + let errorMessages = [] + if (email.value === '' || name.value == null) { + errorMessages.push("Email is required") + } + if (password.length <= 6) { + errorMessages.push('Passsword must be longer than six characters'); + } + + if (password === 'password') { + errorMessages.push('Passsword must not be password'); + } + + if (errorMessages.length > 0) { + e.preventDefault() + errorValue.innerText = errorMessages.join(', ') + } + +}) \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 0000000..f60ec6f --- /dev/null +++ b/login.html @@ -0,0 +1,169 @@ + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+
+ + + We'll never share your email with anyone else. +
+
+ + +
+
+ + +
+ +
+ + + + + + + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/signup.html b/signup.html new file mode 100644 index 0000000..b9a6591 --- /dev/null +++ b/signup.html @@ -0,0 +1,217 @@ + + + + + + + + + + + + + + + + + + + + +
+ + + + +
+
+
+ + +
+ Looks good! +
+
+
+ + +
+ Looks good! +
+
+
+ +
+
+ @ +
+ +
+ Please choose a username. +
+
+
+
+
+
+ + +
+ Please provide a valid city. +
+
+
+ + +
+ Please provide a valid state. +
+
+
+ + +
+ Please provide a valid zip. +
+
+
+
+
+ + +
+ You must agree before submitting. +
+
+
+ +
+ + + + + + + + + +
+ + + + + + + + \ No newline at end of file diff --git a/squares.png b/squares.png new file mode 100644 index 0000000..d3cf0e5 Binary files /dev/null and b/squares.png differ