alirezatnasr

علیرضا طایفی

طراح وب برنامه نویس وب فریلنسر دامپزشک مدرس

alireza tayefi
alirezatayefi

علیرضا طایفی

طراح وب برنامه نویس وب فریلنسر توسعه وب طراح قالب

دریافت رزومه ارتباط با من

مختصری از من

در حال حاضر در حوزه طراحی و برنامه نویسی وب فعالیت دارم.هدفم تبدیل به fullstack شدن بوده و در تمامی فعالیت هایم سعی میکنم جزو بهترین ها باشم. از نظرم کسب مهارت های جدید و تجارب مختلف در راستای علایق و اهداف امری ضروری و لذت بخش بوده و پیشنهادم به تمامی دوستان و اطرافیانم دنبال نمودن علایقشان است.

سن :

24

ساکن :

ایران/تهران

وضعیت فریلنسر :

دردسترس

خدمات من

طراح/برنامه نویس/توسعه دهنده وب

طراحی و توسعه انواع وبسایت ها با استفاده از جدید ترین متد ها از html5 و css3 و برنامه نویسی و پیاده سازی جاوا اسکریپت

seo و بهینه سازی وبسایت

انجام پروژه های seo جهت انواع وبسایت با استفاده از جدید ترین روش ها (رپورتاژ/google analytics/link building/...)

مسلط به وردپرس

انجام انواع پروژه های وردپرس اعم از طراحی و ترجمه قالب/ ساخت انواع قالب شرکتی و فروشگاهی و ... / سئو و امنیت

پشتیبانی

انجام پشتیبانی و هاستینگ انواع وبسایت / به روز رسانی و بک آپ

چرا همکاری با من

همواره در حال مطالعه و حفظ به روز دانش خود

متعهد و مسولیت پذیر

احترام و برخورد حرفه ایی با طرف قرارداد

اماده سازی و انجام وظایف در زمان تعیین شده و به بهترین شکل ممکن

پشتیبانی رایگان ۲ هفته ایی از زمان تحویل

قیمت گذاری منصفانه

دانستنی های باحال در مورد خودم

علاقه مند به سینما
4 مرتبه اتمام بازی last of us
طرفدار دو اتیشه چاووشی
عاشق رانندگی در شب

مشتریان من

رزومه من

سوابق کاری

1398 - حال حاضر

فریلنسر

به صورت ازاد

طراحی ، ترجمه و توسعه انواع وبسایت و قالب ها بر روی انواع cms ها از جمله ورد پرس و دیتا لایف

1398 - 1398

html/css

شرکت آویسا

بررسی کد های HTML , CSS صفحات و خطا یابی و تصیح بود. کدنویسی صفحات فیدبک و ثبت نام وبسایت .

1398 - 1398

فرانت-اند

شرکت شیرین سافت

کارآموزی و یادگیری جاوا اسکریپت .فراگیری seo و بهینه سازی وبسایت

تحصیلات

1393 - 1399

دکترا

البرز(کرج)

تحصیل در دانشگاه ازاد کرج و دریافت مدرک دکترا

1398 - 1399

دوره های طراحی وب

تهران

گذراندن دوره های طراحی وب در اموزشگاه پرنیان زیر نظر استاد پارسا قربانیان و دریافت مدرک وزارت علوم

1398 - 1398

web1

مجتمع فنی

گذراندن دوره وب ۱ در مجتمع فنی تهران و دریافت مدرک مجتمع فنی با نمره کامل

مهارت ها

wordpress html/css php/sql javascript react/native illustrator

پروژه های اخیر

بازگشت

طراحی ربات رجیستری شماره همراه با جاوا


ربات دریافت شماره و نام و رجیستری 
این طراحی اختصاصی بوده و هیچگونه کد اماده ای در ان استفاده نشده است .

این ربات شامل امکانات زیر میباشد :
 * افزودن zip code  دلخواه
 * افزودن نام و پیش شماره اوپراتور دلخواه
 * امکان سرچ زدن در ورودی ها و تعیین رجیستر بودن یا نبودن شماره
 * قابلیت دولوپ و دریافت چک لیست از شماره ها ورودی

کد ها در ادامه مطلب و زیر ویدیو 






java script part
<script>

var _cc = [['سنگال', 221],['سوئد', 46],['سوئیس', 41],['سودان',249],['german',49],['USA', 1],['UK', 44],['iran', 98]]
var _oplist = [[0920, 'Rightel']]
var _person=[]
var _result= []
$(function(){
   $('#zipcode').focusout(function(){
        $('#zipcode').css('border', '2px solid rgba(145, 145, 145, 0.329)')
        for(i=0;i< _cc.length; i++){

            var temp= ''

            if(_cc[i][1] == Number($('#zipcode').val()) || _cc[i][0] == $('#zipcode').val()){

                temp = _cc[i][0]
                _result[0] = '(' + _cc[i][1] + ')' + _cc[i][0]
                break
            }
        }

        if(temp == ''){
            $('#zipcode').css('border', '2px solid red')
            _result[0]= null
            $('#operator').attr('disabled', 'disabled')



        }else{
            $('#zipcode').val(temp)
            $('#zipcode').css('border', '2px solid green')
            $('#operator').removeAttr('disabled')
            
        }

   })
//*********************** end zip code***************

$('#zipadd>section>button:first-of-type').click(function(){
        var temp=[]

        if(Number($('#zipadd>section>input:first-of-type').val()) > 9  && $('#zipadd>section>input:last-of-type').val() != '' && Number($('#zipadd>section>input:first-of-type').val()) != 0 ){
            temp[1]= Number($('#zipadd>section>input:first-of-type').val())
            temp[0]= $('#zipadd>section>input:last-of-type').val()
            _cc.push(temp)
            console.log(_cc)

            $('#zipadd>section>input:first-of-type').val(null)
            $('#zipadd>section>input:last-of-type').val(null)
            $('#zipadd>section>input:first-of-type').focus()


        }else{
            $('#invalid').fadeIn(300)
            $('#invalid').delay(1500).fadeOut(300)
        }
    })
 

// ***********************end zipp add*********************
    $('#op>nav>button').click(function(){

        $('#opadd').fadeIn(500)
        $('main').css('filter', 'blur(5px)')

    })
    $('#zipp>nav>button').click(function(){

        $('#zipadd').fadeIn(500)
        $('main').css('filter', 'blur(5px)')

        })

    $('#opadd>section>button:last-of-type').click(function(){
            $('#opadd').fadeOut(500)
            $('main').css('filter', 'none')
    })

    $('#zipadd>section>button:last-of-type').click(function(){
            $('#zipadd').fadeOut(500)
            $('main').css('filter', 'none')
    })

    $('#operator').focus(function(){
        $('#oplist').fadeIn(300)
    })
    $('#operator').focusout(function(){
        $('#oplist').fadeOut(300)
    })

// ***********add operator *************

    $('#opadd>section>button:first-of-type').click(function(){
        var temp=[]

        if(Number($('#opadd>section>input:first-of-type').val()) > 9  && $('#opadd>section>input:last-of-type').val() != '' && Number($('#opadd>section>input:first-of-type').val()) != 0 ){
            temp[0]= Number($('#opadd>section>input:first-of-type').val())
            temp[1]= $('#opadd>section>input:last-of-type').val()
            _oplist.push(temp)
            $('#opadd>section>input:first-of-type').val(null)
            $('#opadd>section>input:last-of-type').val(null)
            $('#opadd>section>input:first-of-type').focus()
            console.log(_oplist)



        }else{
            $('#invalid').fadeIn(300)
            $('#invalid').delay(1500).fadeOut(300)
        }
    })
 
//  ****************end add op***************

$('#operator').focusout(function(){
        $('#operator').css('border', '2px solid rgba(145, 145, 145, 0.329)')
        for(i=0;i< _oplist.length; i++){

            var temp= ''

            if(_oplist[i][0] == Number($('#operator').val()) || _oplist[i][1] == $('#operator').val()){

                temp = _oplist[i][1]
                _result[1] = _oplist[i][1]
                _result[2] = _oplist[i][0]
                break
            }
        }

        if(temp == '' || _oplist == 0){
            $('#operator').css('border', '2px solid red')
            _result[1]= null
            $('#phone').attr('disabled','disabled')



        }else{
            $('#operator').val(temp)
            $('#operator').css('border', '2px solid green')
            $('#phone').removeAttr('disabled')
        }

   })

// *****************end operator***************

$('#phone').focusout(function(){

    if($('#phone').val() != '' && Number($('#phone').val()) >= 0 && $('#phone').val().length >= 6){

        $('#phone').css('border', '2px solid green')
        $('#pname').removeAttr('disabled')

        if($('#phone').val().length < 11){
            _result[2] += $('#phone').val()
            _result[2] = Number(_result[2])

        }else{
            _result[2] = $('#phone').val()
            _result[2] = Number(_result[2])

        }

    }else{
        $('#phone').css('border', '2px solid red')
        _result[2]= null
        $('#pname').attr('disabled','disabled')


    }

})

// *********************end number input*******************

$('#pname').focusout(function(){

if($('#pname').val() != '' &&  $('#pname').val().length >= 3){

    $('#pname').css('border', '2px solid green')
    _result[3]= $('#pname').val()


}else{
    $('#pname').css('border', '2px solid red')
    _result[3]= null
}

})

// ********************end name input*********************


$('#verify').click(function(){

    $('#zipcode').focusout()
    $('#operator').focusout()
    $('#phone').focusout()
    $('#pname').focusout()
    
    if(_result[0] == null || _result[1] == null || _result[2] == null || _result[3] == null){

        $('#invalid').fadeIn(300)
        $('#invalid').delay(1500).fadeOut(300)
        $('#zipcode').val(null)
        $('#operator').val(null)
        $('#phone').val(null)
        $('#pname').val(null)
        $('#zipcode').focusout()
        $('#operator').focusout()
        $('#phone').focusout()
        $('#pname').focusout()
        $('#zipcode').focus()

        _result=[]
    }else{

        _person.push(_result)
        _result=[]
        $('#phone').val(null)
        $('#pname').val(null)
        $('#phone').focus()

        alert('registery succeccfull')
    }


})

//************************ end registery************************

$('#finish').click(function(){

    $('#add').fadeOut(300)
    $('#search').fadeIn(500)

})
$('#add-more').click(function(){

$('#search').fadeOut(300)
$('#add').fadeIn(500)

})

// ******************search part**************************

$('#searching').click(function(){

        console.log($('#regsearch').val())
        console.log(_person)
        for(i=0;i< _person.length; i++){

        if(_person[i][2] == Number($('#regsearch').val())){
            $('#register').text('this number is registered')
            $('#register').css('color', 'green')
            $('#info>h4:nth-of-type(1)>strong').text(_person[i][0])
            $('#info>h4:nth-of-type(2)>strong').text(_person[i][1])
            $('#info>h4:nth-of-type(3)>strong').text(_person[i][3])
            break
        }else{
            $('#register').text('this number is not registered')
            $('#register').css('color', 'red')
            $('#info>h4:nth-of-type(1)>strong').text('')
            $('#info>h4:nth-of-type(2)>strong').text('')
            $('#info>h4:nth-of-type(3)>strong').text('')

        }
    }


})


})


</script>






html part
<body>
    <section id="invalid">
        <h2>invalid input</h2>
    </section>
    <section id="opadd">
        <section>
             <input type="text" placeholder="aperator number">
             <input type="text" placeholder="aperator name">
             <button>aDD</button>
             <button>finish</button>
        </section>
    </section>

    <section id="zipadd">
        <section>
             <input type="text" placeholder="zip code">
             <input type="text" placeholder="country ">
             <button>aDD</button>
             <button>finish</button>
        </section>
    </section>
    <main>
        
        <section id="add">
            <section>
                 <div id="zipp">
                       <nav>
                        <input type="text" placeholder="zip code" id="zipcode" >
                         <button><i class="fa fa-plus" aria-hidden="true"></i></button>
                        </nav>
                
                 </div>
                 <div id="op">
                    <nav>
                    <input type="text" placeholder="operator" id="operator" disabled>
                    <button><i class="fa fa-plus" aria-hidden="true"></i></button>
                    <ul id="oplist">
                    </ul>
                    </nav>
                
                </div>
                <input type="text" placeholder="phone number" id="phone" disabled>
                 <input type="text" placeholder="name" id="pname" disabled>

                <button id="verify">add number</button>
                <button id="finish">finish</button>
            </section>
        </section>             

        <section id="search">
            <section>
                 <input type="text" placeholder="enter number" id="regsearch">
                 <button id="searching">search</button>
                 <button id="add-more">add more</button>
                 <section id="info">
                      <h3 id="register"></h3>
                      <h4>country: <strong></strong></h4>
                      <h4>operator: <strong></strong></h4>
                       <h4>registered name: <strong></strong></h4>
                 </section>
             </section>
        </section>

        <section id="checklist"></section>



    </main>

</body>





css part

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
main{
    width: 100%;
    height: 100vh;
    float: left;
    background-image: url(../img/bg.jpeg);
    background-size: cover;
    background-position: center;
    position: relative;

}
#invalid{
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.699);
    position: absolute;
    display: none;
    z-index: 1001;
}
#invalid>h2{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
    font-size: 30px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: uppercase;
}

#opadd, #zipadd{
    width: 300px;
    height: 300px;
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    background-color: rgba(133, 10, 10, 0.692);
    border-radius: 6px;
    z-index: 100;
    display: none;

}
#opadd>section, #zipadd>section{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
}

#add, #search{
    width: 450px;
    height: 350px;
    position: absolute;
    left: calc(50% - 225px);
    top: calc(50vh - 175px);
    background-color: rgba(66, 123, 209, 0.781);
    border-radius: 6px;
    box-shadow: 0 0 10px 3px rgb(0, 0, 0);


}
#add>section, #search>section{
    width: 100%;
    height: 100%;
    display: flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: space-around;
    border-radius: 6px;

}


::placeholder{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: capitalize;
    color: whitesmoke;
}

#add>section>input, #op>nav>input, #opadd>section>input, #search>section>input, #zipp>nav>input, #zipadd>section>input{
    width: 180px;
    height: 30px;
    border: 2px solid rgba(145, 145, 145, 0.329);
    background-color: rgba(255, 255, 255, 0);
    padding: 0 5px;
    color: whitesmoke;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: capitalize;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;

}

#add>section>input:focus, #zipp>nav>input:focus, #op>nav>input:focus, #opadd>section>input:focus, #search>section>input:focus, #zipadd>section>input:focus{
    border: 2px solid rgb(233, 233, 233);

}


#op, #zipp{
    width: 120px;
    height: 30px;
    display: flex;
    flex-wrap: wrap;
}
#op>nav, #zipp>nav{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;

}
#op>nav>input, #zipp>nav>input{
    width: 65%;

}

#oplist{
    width: 87%;
    max-height: 100px;
    position: absolute;
    overflow-y: scroll;
    top: 100%;
    display: none;

}
#oplist>li{
    width: 100%;
    height: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    color: whitesmoke;
    text-transform: capitalize;
    font-size: 13px;
    list-style: none;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.616);
}

#add>section>button, #op>nav>button, #opadd>section>button, #search>section>button, #zipp>nav>button, #zipadd>section>button{
    width: 115px;
    height: 35px;
    border-radius: 3px;
    border: 2px solid rgba(255, 255, 255, 0.568);
    text-transform: capitalize;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0);
    color: white;
    line-height: 35px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    font-weight: 550;
}
#add>section>button:hover, #op>nav>button:hover,#search>section>button:hover, #zipp>nav>button:hover{
    color: rgba(66, 123, 209, 0.781);
    background-color: #fff;
}
#opadd>section>button:hover, #zipadd>section>button:hover{
    color: rgba(133, 10, 10, 0.692);
    background-color: #fff;


}
#search>section>button:hover{
    color: rgba(7, 94, 100, 0.815);
}

#op>nav>button, #zipp>nav>button{
    width: 20%;
    border-radius: 2px;
    line-height: 30px;
    height: 30px;
    margin-left: 3px;
    
}

#search{
    display: none;
    background-color: rgba(7, 94, 100, 0.815);
    flex-direction: column;
    align-items: center;
}

#info{
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: space-around;
    padding: 10px;
}
#info>*{
    color: whitesmoke;
    text-transform: uppercase;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}
#info>h4>strong{
    color: yellowgreen;
    margin-left: 10px;
}


بازگشت

نظرات (0)

ارسال دیدگاه

با نظرات سازنده خود ما را در بهبود هرچه بهتر کیفیت مطالب یاری نمایید.

مسیر های ارتباطی

تلفن :

ایمیل :

فرم تماس

بازگشت

طراحی ربات رجیستری شماره همراه با جاوا


ربات دریافت شماره و نام و رجیستری 
این طراحی اختصاصی بوده و هیچگونه کد اماده ای در ان استفاده نشده است .

این ربات شامل امکانات زیر میباشد :
 * افزودن zip code  دلخواه
 * افزودن نام و پیش شماره اوپراتور دلخواه
 * امکان سرچ زدن در ورودی ها و تعیین رجیستر بودن یا نبودن شماره
 * قابلیت دولوپ و دریافت چک لیست از شماره ها ورودی

کد ها در ادامه مطلب و زیر ویدیو 






java script part
<script>

var _cc = [['سنگال', 221],['سوئد', 46],['سوئیس', 41],['سودان',249],['german',49],['USA', 1],['UK', 44],['iran', 98]]
var _oplist = [[0920, 'Rightel']]
var _person=[]
var _result= []
$(function(){
   $('#zipcode').focusout(function(){
        $('#zipcode').css('border', '2px solid rgba(145, 145, 145, 0.329)')
        for(i=0;i< _cc.length; i++){

            var temp= ''

            if(_cc[i][1] == Number($('#zipcode').val()) || _cc[i][0] == $('#zipcode').val()){

                temp = _cc[i][0]
                _result[0] = '(' + _cc[i][1] + ')' + _cc[i][0]
                break
            }
        }

        if(temp == ''){
            $('#zipcode').css('border', '2px solid red')
            _result[0]= null
            $('#operator').attr('disabled', 'disabled')



        }else{
            $('#zipcode').val(temp)
            $('#zipcode').css('border', '2px solid green')
            $('#operator').removeAttr('disabled')
            
        }

   })
//*********************** end zip code***************

$('#zipadd>section>button:first-of-type').click(function(){
        var temp=[]

        if(Number($('#zipadd>section>input:first-of-type').val()) > 9  && $('#zipadd>section>input:last-of-type').val() != '' && Number($('#zipadd>section>input:first-of-type').val()) != 0 ){
            temp[1]= Number($('#zipadd>section>input:first-of-type').val())
            temp[0]= $('#zipadd>section>input:last-of-type').val()
            _cc.push(temp)
            console.log(_cc)

            $('#zipadd>section>input:first-of-type').val(null)
            $('#zipadd>section>input:last-of-type').val(null)
            $('#zipadd>section>input:first-of-type').focus()


        }else{
            $('#invalid').fadeIn(300)
            $('#invalid').delay(1500).fadeOut(300)
        }
    })
 

// ***********************end zipp add*********************
    $('#op>nav>button').click(function(){

        $('#opadd').fadeIn(500)
        $('main').css('filter', 'blur(5px)')

    })
    $('#zipp>nav>button').click(function(){

        $('#zipadd').fadeIn(500)
        $('main').css('filter', 'blur(5px)')

        })

    $('#opadd>section>button:last-of-type').click(function(){
            $('#opadd').fadeOut(500)
            $('main').css('filter', 'none')
    })

    $('#zipadd>section>button:last-of-type').click(function(){
            $('#zipadd').fadeOut(500)
            $('main').css('filter', 'none')
    })

    $('#operator').focus(function(){
        $('#oplist').fadeIn(300)
    })
    $('#operator').focusout(function(){
        $('#oplist').fadeOut(300)
    })

// ***********add operator *************

    $('#opadd>section>button:first-of-type').click(function(){
        var temp=[]

        if(Number($('#opadd>section>input:first-of-type').val()) > 9  && $('#opadd>section>input:last-of-type').val() != '' && Number($('#opadd>section>input:first-of-type').val()) != 0 ){
            temp[0]= Number($('#opadd>section>input:first-of-type').val())
            temp[1]= $('#opadd>section>input:last-of-type').val()
            _oplist.push(temp)
            $('#opadd>section>input:first-of-type').val(null)
            $('#opadd>section>input:last-of-type').val(null)
            $('#opadd>section>input:first-of-type').focus()
            console.log(_oplist)



        }else{
            $('#invalid').fadeIn(300)
            $('#invalid').delay(1500).fadeOut(300)
        }
    })
 
//  ****************end add op***************

$('#operator').focusout(function(){
        $('#operator').css('border', '2px solid rgba(145, 145, 145, 0.329)')
        for(i=0;i< _oplist.length; i++){

            var temp= ''

            if(_oplist[i][0] == Number($('#operator').val()) || _oplist[i][1] == $('#operator').val()){

                temp = _oplist[i][1]
                _result[1] = _oplist[i][1]
                _result[2] = _oplist[i][0]
                break
            }
        }

        if(temp == '' || _oplist == 0){
            $('#operator').css('border', '2px solid red')
            _result[1]= null
            $('#phone').attr('disabled','disabled')



        }else{
            $('#operator').val(temp)
            $('#operator').css('border', '2px solid green')
            $('#phone').removeAttr('disabled')
        }

   })

// *****************end operator***************

$('#phone').focusout(function(){

    if($('#phone').val() != '' && Number($('#phone').val()) >= 0 && $('#phone').val().length >= 6){

        $('#phone').css('border', '2px solid green')
        $('#pname').removeAttr('disabled')

        if($('#phone').val().length < 11){
            _result[2] += $('#phone').val()
            _result[2] = Number(_result[2])

        }else{
            _result[2] = $('#phone').val()
            _result[2] = Number(_result[2])

        }

    }else{
        $('#phone').css('border', '2px solid red')
        _result[2]= null
        $('#pname').attr('disabled','disabled')


    }

})

// *********************end number input*******************

$('#pname').focusout(function(){

if($('#pname').val() != '' &&  $('#pname').val().length >= 3){

    $('#pname').css('border', '2px solid green')
    _result[3]= $('#pname').val()


}else{
    $('#pname').css('border', '2px solid red')
    _result[3]= null
}

})

// ********************end name input*********************


$('#verify').click(function(){

    $('#zipcode').focusout()
    $('#operator').focusout()
    $('#phone').focusout()
    $('#pname').focusout()
    
    if(_result[0] == null || _result[1] == null || _result[2] == null || _result[3] == null){

        $('#invalid').fadeIn(300)
        $('#invalid').delay(1500).fadeOut(300)
        $('#zipcode').val(null)
        $('#operator').val(null)
        $('#phone').val(null)
        $('#pname').val(null)
        $('#zipcode').focusout()
        $('#operator').focusout()
        $('#phone').focusout()
        $('#pname').focusout()
        $('#zipcode').focus()

        _result=[]
    }else{

        _person.push(_result)
        _result=[]
        $('#phone').val(null)
        $('#pname').val(null)
        $('#phone').focus()

        alert('registery succeccfull')
    }


})

//************************ end registery************************

$('#finish').click(function(){

    $('#add').fadeOut(300)
    $('#search').fadeIn(500)

})
$('#add-more').click(function(){

$('#search').fadeOut(300)
$('#add').fadeIn(500)

})

// ******************search part**************************

$('#searching').click(function(){

        console.log($('#regsearch').val())
        console.log(_person)
        for(i=0;i< _person.length; i++){

        if(_person[i][2] == Number($('#regsearch').val())){
            $('#register').text('this number is registered')
            $('#register').css('color', 'green')
            $('#info>h4:nth-of-type(1)>strong').text(_person[i][0])
            $('#info>h4:nth-of-type(2)>strong').text(_person[i][1])
            $('#info>h4:nth-of-type(3)>strong').text(_person[i][3])
            break
        }else{
            $('#register').text('this number is not registered')
            $('#register').css('color', 'red')
            $('#info>h4:nth-of-type(1)>strong').text('')
            $('#info>h4:nth-of-type(2)>strong').text('')
            $('#info>h4:nth-of-type(3)>strong').text('')

        }
    }


})


})


</script>






html part
<body>
    <section id="invalid">
        <h2>invalid input</h2>
    </section>
    <section id="opadd">
        <section>
             <input type="text" placeholder="aperator number">
             <input type="text" placeholder="aperator name">
             <button>aDD</button>
             <button>finish</button>
        </section>
    </section>

    <section id="zipadd">
        <section>
             <input type="text" placeholder="zip code">
             <input type="text" placeholder="country ">
             <button>aDD</button>
             <button>finish</button>
        </section>
    </section>
    <main>
        
        <section id="add">
            <section>
                 <div id="zipp">
                       <nav>
                        <input type="text" placeholder="zip code" id="zipcode" >
                         <button><i class="fa fa-plus" aria-hidden="true"></i></button>
                        </nav>
                
                 </div>
                 <div id="op">
                    <nav>
                    <input type="text" placeholder="operator" id="operator" disabled>
                    <button><i class="fa fa-plus" aria-hidden="true"></i></button>
                    <ul id="oplist">
                    </ul>
                    </nav>
                
                </div>
                <input type="text" placeholder="phone number" id="phone" disabled>
                 <input type="text" placeholder="name" id="pname" disabled>

                <button id="verify">add number</button>
                <button id="finish">finish</button>
            </section>
        </section>             

        <section id="search">
            <section>
                 <input type="text" placeholder="enter number" id="regsearch">
                 <button id="searching">search</button>
                 <button id="add-more">add more</button>
                 <section id="info">
                      <h3 id="register"></h3>
                      <h4>country: <strong></strong></h4>
                      <h4>operator: <strong></strong></h4>
                       <h4>registered name: <strong></strong></h4>
                 </section>
             </section>
        </section>

        <section id="checklist"></section>



    </main>

</body>





css part

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
main{
    width: 100%;
    height: 100vh;
    float: left;
    background-image: url(../img/bg.jpeg);
    background-size: cover;
    background-position: center;
    position: relative;

}
#invalid{
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.699);
    position: absolute;
    display: none;
    z-index: 1001;
}
#invalid>h2{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
    font-size: 30px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: uppercase;
}

#opadd, #zipadd{
    width: 300px;
    height: 300px;
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    background-color: rgba(133, 10, 10, 0.692);
    border-radius: 6px;
    z-index: 100;
    display: none;

}
#opadd>section, #zipadd>section{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
}

#add, #search{
    width: 450px;
    height: 350px;
    position: absolute;
    left: calc(50% - 225px);
    top: calc(50vh - 175px);
    background-color: rgba(66, 123, 209, 0.781);
    border-radius: 6px;
    box-shadow: 0 0 10px 3px rgb(0, 0, 0);


}
#add>section, #search>section{
    width: 100%;
    height: 100%;
    display: flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: space-around;
    border-radius: 6px;

}


::placeholder{
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: capitalize;
    color: whitesmoke;
}

#add>section>input, #op>nav>input, #opadd>section>input, #search>section>input, #zipp>nav>input, #zipadd>section>input{
    width: 180px;
    height: 30px;
    border: 2px solid rgba(145, 145, 145, 0.329);
    background-color: rgba(255, 255, 255, 0);
    padding: 0 5px;
    color: whitesmoke;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    text-transform: capitalize;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;

}

#add>section>input:focus, #zipp>nav>input:focus, #op>nav>input:focus, #opadd>section>input:focus, #search>section>input:focus, #zipadd>section>input:focus{
    border: 2px solid rgb(233, 233, 233);

}


#op, #zipp{
    width: 120px;
    height: 30px;
    display: flex;
    flex-wrap: wrap;
}
#op>nav, #zipp>nav{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    position: relative;

}
#op>nav>input, #zipp>nav>input{
    width: 65%;

}

#oplist{
    width: 87%;
    max-height: 100px;
    position: absolute;
    overflow-y: scroll;
    top: 100%;
    display: none;

}
#oplist>li{
    width: 100%;
    height: 25px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    color: whitesmoke;
    text-transform: capitalize;
    font-size: 13px;
    list-style: none;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    border-bottom: 1px solid rgba(255, 255, 255, 0.616);
}

#add>section>button, #op>nav>button, #opadd>section>button, #search>section>button, #zipp>nav>button, #zipadd>section>button{
    width: 115px;
    height: 35px;
    border-radius: 3px;
    border: 2px solid rgba(255, 255, 255, 0.568);
    text-transform: capitalize;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0);
    color: white;
    line-height: 35px;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
    -ms-transition: .4s;
    -o-transition: .4s;
    font-weight: 550;
}
#add>section>button:hover, #op>nav>button:hover,#search>section>button:hover, #zipp>nav>button:hover{
    color: rgba(66, 123, 209, 0.781);
    background-color: #fff;
}
#opadd>section>button:hover, #zipadd>section>button:hover{
    color: rgba(133, 10, 10, 0.692);
    background-color: #fff;


}
#search>section>button:hover{
    color: rgba(7, 94, 100, 0.815);
}

#op>nav>button, #zipp>nav>button{
    width: 20%;
    border-radius: 2px;
    line-height: 30px;
    height: 30px;
    margin-left: 3px;
    
}

#search{
    display: none;
    background-color: rgba(7, 94, 100, 0.815);
    flex-direction: column;
    align-items: center;
}

#info{
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-content: space-around;
    padding: 10px;
}
#info>*{
    color: whitesmoke;
    text-transform: uppercase;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}
#info>h4>strong{
    color: yellowgreen;
    margin-left: 10px;
}


بازگشت

نظرات (0)

ارسال دیدگاه

با نظرات سازنده خود ما را در بهبود هرچه بهتر کیفیت مطالب یاری نمایید.