```
import { useState } from 'react';

const AddNote = ({ handleAddNote }) => {
    const [noteText, setNoteText] = useState('');

    const [jobLink, setJobLink] = useState('');

    const characterLimit = 200;

    const handleDescChange = (event) => {
        if (characterLimit - event.target.value.length >= 0) {
            setNoteText(event.target.value);
        }
    };

    const handleJobLinkChange = (event) => {
        if (event.target.value.length >= 0) {
            setJobLink(event.target.value);
            console.log(event.target.value);
        }
    };

    const handleSaveClick = () => {
        if (noteText.trim().length > 0) {
            handleAddNote(noteText);
            setNoteText('');
            setJobLink('');
        }
    };

    return (
        <div className='note new'>
            <textarea
                rows='8'
                cols='10'
                placeholder='Type to add a note...'
                value={noteText}
                onChange={handleDescChange}
            ></textarea>
            <input style={{
                paddingTop: "1.5%",
                outline: "none",
                color: "black",
                marginRight: "0px",
                marginLeft: "0px",
                paddingRight: "0px",
                backgroundColor: "white"
            }}
                className="form-control"
                id="link"
                name="link"
                placeholder="Link to Job Posting"
                value={jobLink}
                type="link"
                onChange={handleJobLinkChange}
            />
            <div className='note-footer'>
                <small>
                    {characterLimit - noteText.length} Remaining
                </small>
                <button className='save' onClick={handleSaveClick}>
                    Save
                </button>
            </div>
        </div>
    );
};

export default AddNote;

```

```
import { MdDeleteForever } from 'react-icons/md';
import AddNote from './AddNote';

const Note = ({ id, link, text, date, handleDeleteNote,}) => {

    const go = e => {
        link = "https://www.google.com";
        e.preventDefault();
        window.location.href = link;
    }

    return (
        <div className='note'>
            <span>{text}</span>
            <div className='note-footer'>
                <small>{date}</small>
                <div className='note-btn'>
                <button onClick={go} style={{ backgroundColor: "#001E49", borderRadius: "10px"
                , borderColor: "none", margin: "auto", padding: "8px", marginLeft: "0px"
                , marginRight: "0px", width: "fit-content"
                , borderColor: "none"}}>Apply Here</button>
                </div>
            </div>
        </div>
    );
};

export default Note;

```

```
import Note from './Note';
import AddNote from './AddNote';

const NotesList = ({
    notes,
    handleAddNote,
    handleDeleteNote,
}) => {
    return (
        <div className='notes-list'>
            {notes.map((note) => (
                <Note
                    id={note.id}
                    text={note.text}
                    date={note.date}
                    handleDeleteNote={handleDeleteNote}
                />
            ))}
            <AddNote handleAddNote={handleAddNote} />
        </div>

    );
};

export default NotesList;

```

```
import React from 'react'
import './Internships.css'
import { useState, useEffect } from 'react';
import { nanoid } from 'nanoid';
import NotesList from  '../components/NotesList';
import Search from '../components/Search';
import Header from '../components/Header';

const Internships = () => {

  const [notes, setNotes] = useState([
    ]);

    const [searchText, setSearchText] = useState('');

    const [darkMode, setDarkMode] = useState(false);

    useEffect(() => {
        const savedNotes = JSON.parse(
            localStorage.getItem('react-notes-app-data')
        );

        if (savedNotes) {
            setNotes(savedNotes);
        }
    }, []);

    useEffect(() => {
        localStorage.setItem(
            'react-notes-app-data',
            JSON.stringify(notes)
        );
    }, [notes]);

    const addNote = (text, link) => {
        const date = new Date();
        const newNote = {
            id: nanoid(),
            text: text,
            date: date.toLocaleDateString(),
            link: link,
        };
        const newNotes = [...notes, newNote];
        setNotes(newNotes);
    };

    const deleteNote = (id) => {
        const newNotes = notes.filter((note) => note.id !== id);
        setNotes(newNotes);
    };

    return (
        <div className={`${darkMode && 'dark-mode'}`}>
            <div className='container'>
                <Header />
                <Search handleSearchNote={setSearchText} />
                <NotesList
                    notes={notes.filter((note) =>
                        note.text.toLowerCase().includes(searchText)
                    )}
                    handleAddNote={addNote}
                    handleDeleteNote={deleteNote}
                />
            </div>
        </div>
    );
};

export default Internships

```

for the 'link= "www.google.com"'(it is a placeholder) the button redirects me to google.com but I want there to be a user inputted website and it redirects me there. I am not able to pass joblink into note.js and it is not reading it when I did inspect element on the button that was created. I don't know how to fix trying to get an input from the user and passing it into note.js.