https://github.com/medsagou/blogr-landing-page
https://github.com/medsagou/blogr-landing-page
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/medsagou/blogr-landing-page
- Owner: medsagou
- Created: 2022-08-15T22:10:28.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-08-15T22:33:07.000Z (almost 3 years ago)
- Last Synced: 2025-01-03T19:27:09.055Z (5 months ago)
- Language: CSS
- Size: 593 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Blogr landing page solution
This is a solution to the [Blogr landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/blogr-landing-page-EX2RLAApP).
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
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
### Screenshot
### Links
- Solution URL: [Add solution URL here](https://your-solution-url.com)
- Live Site URL: [Add live site URL here](https://your-live-site-url.com)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- [React](https://reactjs.org/) - JS library
- [Next.js](https://nextjs.org/) - React framework
- [Styled Components](https://styled-components.com/) - For styles
- [Modern css reset](https://piccalil.li/blog/a-modern-css-reset/) - piccalil
### What I learned
```html
```
```css
#close{
display: none;
}
```
```js
const menuContainer = document.getElementById('menu-container');
const hamburgerButton = document.getElementById('hamburger');
const closeButton = document.getElementById('close');
const menuButton = document.getElementById('menu-button');
const subMenuContainer = document.getElementsByClassName('title-drop-down-container');
for (let i = 0; i < subMenuContainer.length ; i++){
subMenuContainer[i].addEventListener('click', function(){
const subMenuState = subMenuContainer[i].getAttribute('area');
if (subMenuState == 'expended'){
subMenuContainer[i].setAttribute('area','not-expended')
}else{
subMenuContainer[i].setAttribute('area','expended')
}
})
}
menuButton.addEventListener('click', function(){
const menuState = menuContainer.getAttribute('state');
if (menuState == 'not-active'){
hamburgerButton.style.display = 'none';
closeButton.style.display = 'block';
menuContainer.setAttribute('state','active');
}else{
hamburgerButton.style.display = 'block';
closeButton.style.display = 'none';
menuContainer.setAttribute('state','not-active');
}
})
```
### Continued development
drop down menus becomes an easy thing to do after my 4th or 5th project that contain a drop down menu.
### Useful resources
- [W3schools](https://www.w3schools.com/) - This helped me for javaScript eventListener. I really liked this pattern and will use it going forward.
- [stackoverflow](https://stackoverflow.com/) - this website help me on the javascript when i get stock.
## Author
- Website - [Mohamed Sagou](https://github.com/medsagou)
- Frontend Mentor - [@medsagou](https://www.frontendmentor.io/profile/medsagou)
- Twitter - [@sagoumohamed](https://www.twitter.com/sagoumohamed)
## Acknowledgments
nothing for this project.