Contacts App ب React js الجزء الثاني


فهاد الجزء الثاني من contact app ب react js غادي نكملو الprojet ديالنا غادي نزيدو style css وأيضا غادي نزيدو ل component لي غادي يمكن من عرض المعلومات الخاصة بل contact لي ضغطنا عليه.

نظرة سريعة بالفيديو

1- إضافة CSS للصفحة الرئيسية ديالنا

فباش نزيد css للصفحة الرئيسية لي زدنا غادي نزيد fichier جديد سميه ListContacts.css فنفس dossier لي هو components فيه عندي styles css لي غادي نحتاج.

فالكود ديال ل fichier ListContacts.css هو :

                                //
body{
    background-color: #d4d4d4;
}
.contact-list{
    list-style: none;
    width: 60%;
    background-color: #f8f3f3;
    padding: 10px 15px 10px 15px;
    margin: 0 auto;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.contact-list li{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}
.contact-image{
    margin-right: 10px;   
}
.buttonAdd{
    margin: auto;
    margin-top: 10px;
}
.buttonRemove{
    margin: auto;
    margin-top: 20px;
}
.remove{
    border: 1px solid rgb(182, 87, 87);
    background-color: beige;
    color: rgb(182, 87, 87);
    font-weight: bolder;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    padding: 5px;
}
.remove:hover{
    background-color:rgb(182, 87, 87);
    color: white;
    cursor: pointer;
}
.searchbar,
.show-results{
    display: flex;
    flex-direction: row;
    list-style: none;
    width: 60%;
    background-color: #f8f3f3;
    padding: 10px 15px 10px 15px;
    margin: 0 auto;
    border-top-left-radius: 5px ;
    border-top-right-radius: 5px;
}
.searchbar input{
    padding: 20px;
    width: 95%;
    border: 1px solid rgb(182, 87, 87);
    border-radius: 5px;
    margin: 0 auto;
}
.showAll{
    border: none;
    background-color: beige;
    color: rgb(19, 109, 211);
    margin: 0px 10px 0 0;
    cursor: pointer;
}
a{
    text-decoration: none;
}
.show-details{
    margin: auto;
    margin-top: 20px;
}
.show{
    background-color: beige;
    color: rgb(182, 87, 87);
    font-weight: bolder;
    padding: 5px;
    border-radius: 5px;
}
.show:hover{
    background-color:rgb(182, 87, 87);
    color: white;
    cursor: pointer;
}
                            

2- عرض المعلومات الخاصة ب contact

باش نعرض ل contact لي سبق وسجلناه ف localStorage كنزيد fichier جديد سميه ContactDetails.js لي فيه كنسترجع ل contact من localStorage من بعد كنعطيه ل variable سميتها contact زدتها ف state.

منبعد كنعرض المعلومات الخاصة بهاد ل contact وكنزيد أيضا رابط لي كيردني للصفحة الرئيسية ولي فاش كنضغط عليه كتنفذ ل fonction clearStorage لي كتمسح ل contact من localStorage باش فاش كنضغط على contact خور كيتبدل لمحتوى ديال ل contact لي مسجل.

فالكود ديال ل fichier ContactDetails.js هو :

                                //
import React,{Component} from 'react';
import {Link} from 'react-router-dom';
import './ContactDetails.css';

class ContactDetails extends Component{
    state = {
        contact : null
    }
    clearStorage = () =>{
        localStorage.removeItem('contact');
    }
    componentWillMount(){
        this.setState({
            contact : JSON.parse(localStorage.getItem('contact'))
        })
    }
    render(){
        return(
            <div>
                <Link to="/" class="back" onClick={() => this.clearStorage()}>
                    <i class="fas fa-arrow-left"></i>
                </Link>
                <div className="contact-details">
                    <div className="contact-header">
                        <img src={this.state.contact.picture.large} alt=""
                            style={{
                                height:'100px',
                                borderRadius:'100px'
                            }}
                        />
                        <p><strong>Nom & Prénom  :</strong> {this.state.contact.name.first} {this.state.contact.name.last}</p>
                        <p><strong>Email :</strong> {this.state.contact.email}</p>
                        <p><strong>Téléphone :</strong> {this.state.contact.cell}</p>
                        <p><strong>Age :</strong> {this.state.contact.dob.age}</p>
                        <p><strong>Adresse :</strong> {this.state.contact.location.street}</p>
                        <p><strong>Ville :</strong> {this.state.contact.location.city}</p>
                    </div>
                    <iframe title="carte" width="400" height="450" frameborder="0"
                        src={`https://www.google.com/maps/embed/v1/place?&q=${this.state.contact.location.coordinates.latitude},${this.state.contact.location.coordinates.longitude}&zoom=6&key=AIzaSyCxvKM3rRpD_KqwANDtvBsL7vqJXUaKFpM`}
                        allowfullscreen>
                    </iframe>
                </div>
            </div>
        )
    }
}


export default ContactDetails;
                            

3- إضافة CSS للصفحة الخاصة بعرض contact

فباش نزيد css للصفحة الخاصة بعرض contact لي زدنا غادي نزيد fichier جديد سميه ContactDetails.css فنفس dossier لي هو components فيه عندي styles css لي غادي نحتاج.

فالكود ديال ل fichier ContactDetails.css هو :

                                //
.contact-details{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    width: 30%;
    padding: 20px;
    margin: 0 auto;
    border-radius: 5px;
}
.back{
    background-color: white;
    padding: 8px;
    margin: 0 auto;
    border-radius: 5px;
    text-decoration: none;
}
                            

4- إضافة fontawesome ل app

باش نزيد ل icônes ل application ديالي غادي نخدم ب fontawesome فكيكفي باش تزيد السطر التالي فل head  ديال الملف index.html لي ف dossier public :

                                    //
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد