Resume Builder Project_1

Programming languages used

• nextJs

Introduction

This project is for practicing NextJs.

some figma

setting

create project on current directory

install node.js is need

npx create-next-app .

If you have never used NextJs, you will be asked

and set the rest as you need. ESLint is recommended(find and fix problems in your JavaScript code)

Also I will use styled-components to practice.

npm install styled-components

import styled from "styled-components";

I created a form page to navigate to the page from home, I used Link tag which works similary as a tag but it provides optimized client-side navigation.

Need to import it first

import Link from "next/link";

export default function Home() {
  return (
    <>
      <Link href="/FormPage">form page</Link>
    </>
  );
}

Color Select Container

For styled-components, define your styled components by calling the styled function and passing an HTML tag or another component. You can then write your CSS styles using tagged template literals.

// should be capitalized
const ColorUl = styled.ul`
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
`;

const ColorBtn = styled.li`
  width: 40px;
  height: 40px;
  border-radius: 5px;
  border: none;
  display: inline-block;
  margin-right: 50px;
  cursor: pointer;
`;

export default function Home() {
  return (
    <>
      <ColorUl>
        <RedBtn />
        <YellowBtn />. . .
      </ColorUl>
      <br></br>
      <Link href="/FormPage">form page</Link>
    </>
  );
}

I might use this color container function again, so I will make it as a component.

export default function ColorContainer() {
  return (
    <>
      <DivCon>
        <RedBtn />
        <YellowBtn />
        .
        .
        .
  );
}

// index.js
export default function Home() {
  return (
    <>
      <h1>Select a Template</h1>
      <ColorContainer></ColorContainer>
      <br />
      <Link href="/FormPage">form page</Link>
    </>
  );
}

Add color picker to select color not on the list.

const ColorSelect = styled.input.attrs({ type: "color" })`
  border: none;
  position: relative;
  bottom: 5px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
`;

I want to make when the color box is clicked, the color input is changed to the color. I need useState method.

import { useState } from "react";

export default function ColorContainer() {
  const [selectedColor, setSelectedColor] = useState("#000000");
.
.
.
  return (
    <>
      <ColorUl>
        <RedBtn onClick={() => setSelectedColor("#e46f7f")} />
        <YellowBtn onClick={() => setSelectedColor("#e46f7f")} />
        .
        .
        .
        <ColorSelect
          value={selectedColor}
          onChange={(e) => setSelectedColor(e.target.value)}
        />
      </ColorUl>
    </>
  );
}

Template Select Container

const Container = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
`;
const Template = styled.div`
  background-color: white;
  width: 265px;
  height: 350px;
  border-radius: 10px;
`;

export default function TemplateContainer() {
  return (
    <>
      <Container>
        <Link href="/FormPage" style=>
          <Template />
        </Link>
        <Link href="/FormPage" style=>
          <Template />
        </Link>
        <Link href="/FormPage" style=>
          <Template />
        </Link>
        .
        .
        .
  );
}

Learned New

Since each components do not share variables(like useState), all variables should be defined in parent components, so I delete ColorContainer, TemplateContainer components and added those in index file.

And added onClick in Link tag to set selectedTemplate.

const [selectedTemplate, setSelectedTemplate] = useState(0);
<Link href="/FormPage" style= onClick={() => setSelectedTemplate(0)}>
.
.
.

Also each page does not share variables as well, but I need to export two variables from SelectPage to FormPage, so I used useRouter method to send the variable in url.

import { useRouter } from "next/router";

export default function SelectPage() {
  const router = useRouter();
  function handleSubmit(color, template) {
    router.push(`/form/0?color=${color}&template=${template}`);
  }
  .
  .
  .
  <button
  onClick={(e) => {
    e.preventDefault();
    handleSubmit(0, selectedColor);
  }}>
    hi
  </button>
}

// FormPage
import { useRouter } from "next/router";

export default function FormPage() {
  const router = useRouter();
  const { color, template } = router.query;
  console.log(`color: ${color}`);
  console.log(`template: ${template}`);
  return <></>;
}

If there is an section sign in query, need to encode it.

function handleSubmit(template, color) {
  router.push(`/Form?template=${template}&color=${encodeURIComponent(color)}`);
}