All solutions

the process to the card design seems seasy at first but challenging in the process. questions

1-- the layout design in the atm card pictures adding overlay div block element was pretty challenging specially the responsiveness part...so what type of method is optimal to use for these type of things?

2-- the input type='number' can not be limited the number of characters by maxlength and max attribute since it is not work for number type so i ended up using JS function for maxlength....so is there any other way?

3- i use border-image property for a border with a linear gradient*when the input focused ...but i can't apply the border-radius since it can't go along with border image so how to fix these? beside these the input validation process was fun and at the same time pretty challenging i created several functions to check for each of them according to there input types and design. i use moment js library to validate date and month also add my function .

heloo community

Even if building a web app is easy with frameworks i used pure Javascript tools to build this webapp. i used module type JS to enable building different components(9) of JS and combining them in to one JS file. crucial components

• formatNum.js/formating population number
• setCountry.js/adding the clicked country name in to local storage(enable to acess it after we are redirected to the single country page)

Cool methods

1 - using ...new Set method to return the unique values from the data[in these project to grab the unique continents ] instead of using reduce method its easy 2 -format number --recive a number and format it to the thousends formats

function formatNum(number) {
  let nf = new Intl.NumberFormat('en-US');
  nf = nf.format(number);
  return nf;
}

3 - Object.values(objname)[index] method to grab the first item of object from the teration, even if the property name is not consistent for all of iterable objects

const newnativeName = Object.values(nativeName)[0].official;

finally

i do my best to make it responsive and it looks good for me ....as usual if u have a better way of doing these project please leave a comment ....and also if u have difficulties doing these project u can refer my codes i elaborate details of it as a line comment in JS.. Thank U!

basic API practice with a little bit of color flipper sauce

it was fun and easy until animating the card comes to play...but the result worth it .. to create the flip animation...the flip animation basically have a callback function which receive two parameters(arguments)..flipcard[the element that we want to display] and the time that we calculated[newnumber] .. i also consider formatting the time when the number is single digit so i add 0 when its single digit.. another thing to consider is when the countdown ends the page should display some kind of message... it helps me to practice adding animation event listener when it start and when it ends and finally JS will do the rest of magic starting from dynamically adding the exact time when will end the countdown...if u have a better procedure please leave a comment

holla everyone , i know these is just basic project but there are some tricks to tackle the problems such as the samp element that is added inside a button element so that we can add another psudoelement on the button (later used to hover) and also css clip path skill which used to snip the polygon by clip-path property. For the nav menu mobile version finally i add the fixed nav bar functionality to the page by comparing the nav height to the pageYOffset so if u don't know how to implement these type of functionalities you can check my github repositories there is detailed readme file on that ...finally as u guys always do if u have any shortcut or better way of doing things please let me know in the comments thank u!

user experience question : do u think it's a good idea to close the dropdown card(links under a specific nav-lists) after a user clicks on the dropdown card links? if it is not recommended i will fix that

Even if these type of E-commerce projects are done with frameworks to make life easier but i challenge myself to the extreme building the components by pure vanilla JS . the method that i use to make the whole project is using constructor functions as a component of JS since they will build the a whole functionality after i envoke(call) it for any place i want .. the components that i build with constructor function (located in module folder) 1.Modal(pc version only modal.js) 2.prev and next(mobile version constructorMob.js) 3.addToCart(card.js) 4.counter(counter.js)

other components that help to build the project 1.array.js(host files locally to store images) 2.checkout.js(fetch data for countries select input API) 3.darkmode.js(for toggle darkmode ) 4.fixedNavBar.js(for toggle navbar fixed class scroll event) 5.localstorage.js(i will design these soon)

i also added cool features like *page_loading_GIF *collection_cards_feature *Night_mode *checkout_page.

for the checkout page in the country select input i use *API to load countries and add them in to our select input.....if u see some bugs please correct me(except the notification **bug after the item deleted i will fix that after completing the local storage function when i got time to do that) and also if u see something **new ask me

first time to try scss and i think it is useful try it!

to be honest these is a best exercise to practice java basics Math methods like ParseInt(),.Fixed(),parseFloat() but for the most of it it helps me to test my ability with events specially 'keyup' events. i added some overshot JavaScript sauces ....enjoy it to build these web app i use js and css for the most part of the process and also in the html I added data-id and data-value to mark my elments in unique ways for the JavaScript. The main logic is to calculate the tip amount per person and total expenditure per person for a random group of people and I don't think anyone could have encounter math's issues in these challenges but the main task in these project is to think scenarios(cases) and to prepare reaction for that in the JavaScript as a programmer , these small web app require to think different scenarios(cases) case-1]when a user didn't click(add values) on the bill input and also when a user didn't click on the rate btn case-2]when a user insert a 0 value to person input[cant be 0 warning] case-3]when a user insert in custom input and changes idea to click the rate btn and vice versa case-4]when a user insert a 0 value to the bill input and also a reset btn have a set back to default functionality which will restore everything

these helps me to practice a basics of javascript methods specially forEach method ,by selecting the parent container and then accessing each and every elment of that item .and also displaying the dataset-id in the result section of card. the parent container for rating btns is

  <div class="rating-container">
    <button class="btn btn-rating" data-id="1">1</button>
    <button class="btn btn-rating" data-id="2">2</button>
    <button class="btn btn-rating" data-id="3">3</button>
    <button class="btn btn-rating" data-id="4">4</button>
    <button class="btn btn-rating" data-id="5">5</button>
  </div>

and the result card should be set like these by default when we acess the DOM we remove these classlist and then add it to the rating card thats the whole logic in the css

.hidden {
  opacity: 0;
  display: none;
}

the main logic in the js is printing the data-set id of the given btn and then print it to the result card

//remove active state from btns
eachBtns.forEach((btn) => {
  btn.classList.remove('btn-active');
  e.target.classList.add('btn-active');
  textResult.innerHTML = `You selected ${id} out of 5`; //printing the selected value to result
});

and also i added a little bit of code for to go back home page and to clear the rating buttons active class .

hey guys these is one of the challenges i get interesting in frontend metor since it it seems easy but challenging! the main goal of these design is not designing the card ,it is setting the two SVG backgrounds at the back of the card so how could we do it since we cnat set it like othe svg backgrounds? ->i completed these design using CSS property :before and :after ,so the logic is 1]to have a container with SVG backgrounds that holds some content in it so i put the container position #relative so that i can position my svg backgrounds absolute to the container. 2]don't forget to put overflow hidden and min-height 100vh for container and also z-index -1(to drag background at the back of content)

3]so our pseudoelments after and before has commmon properties both are ..width and height 100vw and 100vh ...z-index -1 ...and position #absolute 4]since for the top svg background i use ::before and for bottom ::after according to there position 5].container:before i set position from top:0 and left:0;[center screen/default position ] 6].container:after i set position from top:100% and left 100%; [out of screen] 7]i use translate property for both of them transform:translate(-50%,-50%); 8]the translate property will drag each of the 50% from right and 50% from bottom 9] i usebackground: url('/images/bg-pattern-top.svg') no-repeat bottom right; /to expand to bottom and right/ for :before andbackground: url('./images/bg-pattern-bottom.svg') no-repeat top left; /to expand to top and left/ for :after !

These was one of the interesting homepage i've designed lately, also it has new expriences including 1-**changing the SVG image fill colors editing in there svg paths 2-**Enabling AOS(animate on scroll) animation JS libraries to the grid elements 3-**swapping the orders of picture grid elements[for Pc version] by pseudo selector .card--grid:nth of type(odd) .picture{ order:1}//it means that we want to swap order of picture for grid when it is odd[1st,3rd,5th..] //and note that order starts from 0 so 1 means picture to the right

there isnt any thing heavy about this basic project all u have to is design a card component by using grid layout ->by making the ```css .grid1x2 { display: grid; grid-template-rows: 63% 37%;//the distribution of row percentage between image and lower part// grid-template-columns: 22rem;//horizontal width of card//

background: var(--color-background); border-radius: 15px; overflow: hidden;}

these practical challenge helps me to practice how to set a resolution switching image according to the screen sizes so we have given two different images 1x and 2x for small and wider screens so whenever the screen size changes from 750px the image we provide will be changed automatically! these is how it is done

`<picture>

beside the card grid layout will be change from 1x2 to 2x1 for mobile versions ! and also it have something to practice on text-decoration property for price tag we must put line-through and the thickness should be very thin ```html `<div class="old__price">

• Semantic HTML5 markup
• CSS custom properties
• Flex
• CSS Grid
• Mobile-first workflow
• javascript

this project helps me to work friendly with SVG picture backgrounds 1]mixing svg picture backgrounds with background color 2]positioning svg background to y-offset according to design image 3]adding slightly box shadows to buttons and grid

`.grid1x2 {
  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1); /*box-shadow: h-offset v-offset blur spread color */
}`

`@media screen and (min-width: 800px) {
  .center {
    display: flex;
    justify-items: center;
    background: url(./images/pattern-background-desktop.svg) no-repeat top;
    background-size: contain;
    background-position-y: -30%;
    background-color: var(--color-secondary);

    justify-content: center;
    align-items: center;
    height: 100vh;
    max-width: 100vw;
  }
}`

i added a little bit of javascript to spice things up ,when the user click on change the subscribe choice is changing.

`function showPlan(currentItem) {
  const item = subscribe[currentItem];
  headText.textContent = item.head;
  price.textContent = item.price;
}`

hey guys these is the best challenge to practice the overlay over an image using the relative and absolute positioning.what really i learned in these project is testing my ablity to position elements absolute by positioning the parent element relatively.

<div class="card-img"> <img src="./images/image-equilibrium.jpg" alt="" /> <div class="card-overlay"> <img src="./images/icon-view.svg" alt="Icon View" width="48" height="48" /> </div> </div> so when we hover over the card-img the hidden overlay image with background color will pop up by changing its opacity to 1. .card-overlay:hover { opacity: 1; transition: ease-out transform 0.8s; } To see how you can add code snippets, see below: the overlay is enabled to be transparent background-image: url(./images/icon-view.svg) no-repeat center; background-color: hsl( 178, 100%, 50%, 0.5 ); /0.5 is opacity of color to enable transparency/

and also the thin horizontal line is designed using horizontal row property /horizontal row line/ hr { border-bottom: 0; border-left: 0; border-right: 0; border-top: 1px solid; height: 10px; color: var(--color-line); margin-top: 1.5rem; }